Banco de Memórias Consolidadas
GEMINI
24/02/2026 às 01:08
Larinster
Prompted O sistema não é da Larinster, apenas tem conexão ativa e confirmada com a larinster, pode fazer um novo layout?
GEMINI
24/02/2026 às 01:08
Larinster
Prompted Vamos lá, o que eu preciso pra essa página inicial, o "titulo de TRICAMPEÃ SELO OURO SEBRAE", preciso de de uma parte voltada a "Sala do Empreendedor de Horizonte", preciso de uma parte voltada a atendimentos realizados pela sala do empreendedor (Esses dados repasso depois), uma parte informando quem é a agente de desenvolvimento responsável pela sala da unidade, preciso de uma parte sobre os dois selos, preciso de uma parte que tenha essa frase "Empreender é criar caminhos onde ainda não existem estradas.", preciso de uma parte mostrando quais serviços um microempreendedor individual tem, uma parte falando sobre faturamento do mei anual, uma parte de parceiros, uma parte que mostre alguns cursos, uma parte para portal de noticias, uma parte onde posso incluir o perfil do instagram as últimas postagens, no rodapé, preciso de um espaço para 3 logos, logo abaixo as informações da sala, horário e midia social, e finalizando informando que o site da sala do empreendedor agora faz parte do sistema larinster
GEMINI
24/02/2026 às 01:08
Larinster
Prompted Pode remover o botão ACESSAR SISTEMA DIGITAL e modificar esse trecho
<p style="font-size: 1.2rem; color: #fff; line-height: 1.7; margin-bottom: 30px; font-weight: 400; font-style: italic;">
"A Sala do Empreendedor de Horizonte-Sebrae deseja a todos os empreendedores um ano repleto de bênçãos! Nossa missão é transformar vidas. Um forte abraço a todos e boas festas."
</p>
Código completo da página:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LARINSTER | Ecossistema Digital</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;700;900&display=swap" rel="stylesheet">
<style>
:root {
--bg-absolute: #050505;
--bg-deep: #0A1C2F;
--primary-blue: #1FA2FF;
--cyan-tech: #00E5FF;
--purple-futuristic: #6C63FF;
--text-main: #F5F7FA;
--glass: rgba(255, 255, 255, 0.03);
--glass-border: rgba(31, 162, 255, 0.2);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
background-color: var(--bg-absolute);
color: var(--text-main);
font-family: 'Inter', sans-serif;
overflow-x: hidden;
line-height: 1.6;
}
/* Fundo Animado */
.universe-bg {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(circle at 50% 50%, var(--bg-deep) 0%, var(--bg-absolute) 100%);
z-index: -1;
}
.glow-orb {
position: absolute;
width: 400px;
height: 400px;
background: var(--primary-blue);
filter: blur(150px);
border-radius: 50%;
opacity: 0.15;
top: 10%;
right: 10%;
animation: float 10s infinite alternate;
}
@keyframes float {
from { transform: translate(0, 0); }
to { transform: translate(-50px, 50px); }
}
/* Layout */
header {
padding: 40px;
display: flex;
justify-content: space-between;
align-items: center;
backdrop-filter: blur(10px);
position: sticky;
top: 0;
z-index: 100;
}
.logo {
font-weight: 900;
font-size: 1.5rem;
letter-spacing: 4px;
color: var(--text-main);
text-decoration: none;
}
.hero {
height: 85vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding: 20px;
}
.hero h1 {
font-size: clamp(3rem, 10vw, 6rem);
font-weight: 900;
text-transform: uppercase;
margin-bottom: 1rem;
background: linear-gradient(to bottom, #fff 30%, var(--primary-blue));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
letter-spacing: -2px;
}
.hero p {
max-width: 600px;
font-size: 1.2rem;
color: rgba(245, 247, 250, 0.7);
margin-bottom: 3rem;
}
/* Botão Principal */
.btn-universe {
padding: 20px 45px;
font-size: 1rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 2px;
color: #fff;
background: transparent;
border: 1px solid var(--glass-border);
border-radius: 4px;
cursor: pointer;
position: relative;
overflow: hidden;
transition: 0.4s;
box-shadow: 0 0 20px rgba(31, 162, 255, 0.1);
}
.btn-universe:hover {
background: var(--primary-blue);
box-shadow: 0 0 40px rgba(31, 162, 255, 0.4);
border-color: var(--cyan-tech);
transform: translateY(-3px);
}
/* Grid de Módulos */
.modules {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
padding: 100px 10%;
background: linear-gradient(to bottom, transparent, rgba(10, 28, 47, 0.5));
}
/* Ajuste para tornar os cards clicáveis */
.card-link {
text-decoration: none;
color: inherit;
display: block;
}
.card {
background: var(--glass);
border: 1px solid var(--glass-border);
padding: 40px;
border-radius: 15px;
transition: 0.3s;
height: 100%;
}
.card:hover {
border-color: var(--cyan-tech);
background: rgba(255, 255, 255, 0.05);
transform: translateY(-5px);
}
.card h3 {
color: var(--cyan-tech);
margin-bottom: 15px;
font-size: 1.4rem;
}
.status-badge {
display: inline-block;
padding: 4px 12px;
font-size: 0.7rem;
border-radius: 50px;
background: rgba(0, 229, 255, 0.1);
color: var(--cyan-tech);
margin-bottom: 20px;
border: 1px solid rgba(0, 229, 255, 0.3);
}
footer {
text-align: center;
padding: 60px;
font-size: 0.8rem;
color: rgba(245, 247, 250, 0.4);
border-top: 1px solid var(--glass-border);
}
body::before {
content: " ";
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.1) 50%),
linear-gradient(90deg, rgba(255, 0, 0, 0.02), rgba(0, 255, 0, 0.01), rgba(0, 0, 255, 0.02));
z-index: 1000;
pointer-events: none;
background-size: 100% 4px, 3px 100%;
}
</style>
</head>
<body>
<div class="universe-bg">
<div class="glow-orb"></div>
</div>
<header>
<a href="index.php" class="logo">LARINSTER</a>
<div class="nav-links">
<small style="color: var(--cyan-tech); letter-spacing: 2px;">V.1.0_ALPHA</small>
</div>
</header>
<main>
<section class="hero">
<h1 style="font-size: clamp(2rem, 8vw, 4rem); letter-spacing: 2px; background: linear-gradient(to bottom, #fff 40%, var(--primary-blue)); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">
HORIZONTE DIGITAL
</h1>
<div style="background: rgba(31, 162, 255, 0.05); border: 1px solid var(--glass-border); padding: 35px; border-radius: 20px; max-width: 700px; margin-top: 20px; margin-bottom: 40px; position: relative; backdrop-filter: blur(10px);">
<div style="display: inline-block; background: var(--primary-blue); color: #fff; padding: 4px 12px; border-radius: 4px; font-size: 0.65rem; font-weight: 900; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 20px;">
Sala do Empreendedor | Horizonte-Sebrae
</div>
<p style="font-size: 1.2rem; color: #fff; line-height: 1.7; margin-bottom: 30px; font-weight: 400; font-style: italic;">
"A Sala do Empreendedor de Horizonte-Sebrae deseja a todos os empreendedores um ano repleto de bênçãos! Nossa missão é transformar vidas. Um forte abraço a todos e boas festas."
</p>
<div style="display: flex; justify-content: space-between; align-items: center; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 20px;">
<div style="text-align: left;">
<span style="display: block; font-size: 0.9rem; font-weight: 700; color: var(--cyan-tech);">Aline Araujo</span>
<span style="font-size: 0.7rem; opacity: 0.6; text-transform: uppercase;">Agente de Desenvolvimento</span>
</div>
<div style="font-size: 1.2rem; opacity: 0.3; color: var(--primary-blue); font-weight: 300;">&</div>
<div style="text-align: right;">
<span style="display: block; font-size: 0.9rem; font-weight: 700; color: var(--cyan-tech);">Francklyn Souza</span>
<span style="font-size: 0.7rem; opacity: 0.6; text-transform: uppercase;">Horizonte - CE</span>
</div>
</div>
</div>
<div id="loader-overlay" style="display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:var(--bg-absolute); z-index:2000; flex-direction:column; justify-content:center; align-items:center;">
<div id="terminal-text" style="font-family:monospace; color:var(--cyan-tech); margin-bottom:20px; font-size:0.9rem; text-align:left; width:300px;"></div>
<div style="width:250px; height:2px; background:rgba(31, 162, 255, 0.2); position:relative; overflow:hidden;">
<div id="progress-bar" style="position:absolute; width:0%; height:100%; background:var(--primary-blue); box-shadow: 0 0 15px var(--primary-blue); transition: width 0.3s;"></div>
</div>
<div id="status-percent" style="margin-top:10px; font-size:0.8rem; color:var(--primary-blue); letter-spacing:2px;">0%</div>
</div>
<button class="btn-universe" onclick="startLarinsterProtocol('welcome.php')">
ACESSAR SISTEMA DIGITAL
</button>
<p style="margin-top: 2rem; font-size: 0.8rem; opacity: 0.4; letter-spacing: 1px;">
GESTÃO DE IDENTIDADE E DESENVOLVIMENTO ECONÔMICO
</p>
</section>
<section class="modules">
<a href="transferencia.php" class="card-link">
<div class="card">
<span class="status-badge">ATIVO</span>
<h3>Transferência Inteligente</h3>
<p>Compartilhamento de documentos com consentimento explícito e rastreabilidade total.</p>
</div>
</a>
<a href="identidade.php" class="card-link">
<div class="card">
<span class="status-badge" style="color: #6C63FF; border-color: #6C63FF;">ACESSAR</span>
<h3>Identidade Digital</h3>
<p>Estruturação de perfis profissionais e organizacionais para eliminar o retrabalho burocrático.</p>
</div>
</a>
<a href="historico.php" class="card-link">
<div class="card">
<span class="status-badge" style="color: var(--primary-blue); border-color: var(--primary-blue);">HISTÓRICO</span>
<h3>Log de Protocolos</h3>
<p>Monitore todas as interações e acessos aos seus dados dentro do ecossistema.</p>
</div>
</a>
</section>
</main>
<footer>
<p>© 2025 LARINSTER - INFRAESTRUTURA DIGITAL INDEPENDENTE</p>
<p style="margin-top: 10px; letter-spacing: 3px;">CONFIANÇA . TRANSPARÊNCIA . EVOLUÇÃO</p>
</footer>
<script>
function startLarinsterProtocol(target) {
const overlay = document.getElementById('loader-overlay');
const terminal = document.getElementById('terminal-text');
const progress = document.getElementById('progress-bar');
const percentText = document.getElementById('status-percent');
overlay.style.display = 'flex';
terminal.innerHTML = ""; // Limpa o terminal para novas execuções
const messages = [
"> ESTABELECENDO CONEXÃO SEGURA...",
"> CARREGANDO NÚCLEO LARINSTER...",
"> SINCRONIZANDO NODOS DE CONFIANÇA...",
"> PROTOCOLO DE CONSENTIMENTO ATIVO.",
"> ACESSO AUTORIZADO."
];
let step = 0;
let width = 0;
const interval = setInterval(() => {
width += Math.random() * 15;
if (width > 100) width = 100;
progress.style.width = width + '%';
percentText.innerText = Math.floor(width) + '%';
if (width > (step + 1) * 20 && step < messages.length) {
terminal.innerHTML += messages[step] + "<br>";
step++;
}
if (width === 100) {
clearInterval(interval);
setTimeout(() => {
// Redireciona para a página definida (Identidade por padrão)
window.location.href = target;
}, 800);
}
}, 150);
}
</script>
</body>
</html>
GEMINI
24/02/2026 às 01:08
Larinster
Prompted Pode remover a Larinster ou qualquer coisa relacionado, vincule esse trecho apenas para a sala do empreendedor de horizonte:
<section class="hero">
<h1>LARINSTER</h1>
<div style="background: rgba(31, 162, 255, 0.05); border: 1px solid var(--glass-border); padding: 35px; border-radius: 20px; max-width: 700px; margin-bottom: 40px; position: relative; backdrop-filter: blur(10px);">
<div style="display: inline-block; background: var(--primary-blue); color: #fff; padding: 4px 12px; border-radius: 4px; font-size: 0.65rem; font-weight: 900; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 20px;">
Sala do Empreendedor | Horizonte-Sebrae
</div>
<p style="font-size: 1.2rem; color: #fff; line-height: 1.7; margin-bottom: 30px; font-weight: 400; font-style: italic;">
"A Sala do Empreendedor de Horizonte-Sebrae deseja a todos os empreendedores um ano repleto de bênçãos! Nossa missão é transformar vidas. Um forte abraço a todos e boas festas."
</p>
<div style="display: flex; justify-content: space-between; align-items: center; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 20px;">
<div style="text-align: left;">
<span style="display: block; font-size: 0.9rem; font-weight: 700; color: var(--cyan-tech);">Aline Araujo</span>
<span style="font-size: 0.7rem; opacity: 0.6; text-transform: uppercase;">Agente de Desenvolvimento</span>
</div>
<div style="font-size: 1.2rem; opacity: 0.3; color: var(--primary-blue); font-weight: 300;">&</div>
<div style="text-align: right;">
<span style="display: block; font-size: 0.9rem; font-weight: 700; color: var(--cyan-tech);">Francklyn Souza</span>
<span style="font-size: 0.7rem; opacity: 0.6; text-transform: uppercase;">Horizonte - CE</span>
</div>
</div>
</div>
<div id="loader-overlay" style="display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:var(--bg-absolute); z-index:2000; flex-direction:column; justify-content:center; align-items:center;">
<div id="terminal-text" style="font-family:monospace; color:var(--cyan-tech); margin-bottom:20px; font-size:0.9rem; text-align:left; width:300px;"></div>
<div style="width:250px; height:2px; background:rgba(31, 162, 255, 0.2); position:relative; overflow:hidden;">
<div id="progress-bar" style="position:absolute; width:0%; height:100%; background:var(--primary-blue); box-shadow: 0 0 15px var(--primary-blue); transition: width 0.3s;"></div>
</div>
<div id="status-percent" style="margin-top:10px; font-size:0.8rem; color:var(--primary-blue); letter-spacing:2px;">0%</div>
</div>
<button class="btn-universe" onclick="startLarinsterProtocol('welcome.php')">
ATIVAR UNIVERSO LARINSTER
</button>
<p style="margin-top: 2rem; font-size: 0.9rem; opacity: 0.5;">
O que você vê hoje é apenas o início.
</p>
</section>
GEMINI
24/02/2026 às 01:08
Larinster
Prompted Neste trecho eu não quero que você foque na Larinster:
<section class="hero">
<h1>LARINSTER</h1>
<p>Não conectamos apenas dados. Organizamos relações entre pessoas, empresas e processos em um ecossistema de confiança contínua.</p>
<div style="background: var(--glass); border: 1px solid var(--glass-border); padding: 25px; border-radius: 15px; max-width: 650px; margin-bottom: 40px; position: relative; overflow: hidden;">
<div style="position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: var(--cyan-tech);"></div>
<h4 style="font-size: 0.7rem; color: var(--cyan-tech); letter-spacing: 3px; text-transform: uppercase; margin-bottom: 15px; opacity: 0.8;">
Mensagem da Sala do Empreendedor
</h4>
<p style="font-size: 1.05rem; color: #fff; line-height: 1.6; margin-bottom: 20px; font-weight: 300;">
A Sala do Empreendedor de Horizonte-Sebrae deseja a todos os empreendedores um ano repleto de bênçãos! Nossa missão é transformar vidas. Um forte abraço a todos e boas festas.
</p>
<div style="display: flex; justify-content: space-between; align-items: flex-end; border-top: 1px solid rgba(255,255,255,0.05); pt: 15px; padding-top: 15px;">
<div style="text-align: left;">
<span style="display: block; font-size: 0.8rem; font-weight: 700; color: var(--primary-blue);">Aline Araujo</span>
<span style="font-size: 0.65rem; opacity: 0.6; text-transform: uppercase; letter-spacing: 1px;">Agente de Desenvolvimento</span>
</div>
<div style="text-align: right;">
<span style="display: block; font-size: 0.8rem; font-weight: 700; color: var(--primary-blue);">Francklyn Souza</span>
<span style="font-size: 0.65rem; opacity: 0.6; text-transform: uppercase; letter-spacing: 1px;">Horizonte - CE</span>
</div>
</div>
</div>
<div id="loader-overlay" style="display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:var(--bg-absolute); z-index:2000; flex-direction:column; justify-content:center; align-items:center;">
<div id="terminal-text" style="font-family:monospace; color:var(--cyan-tech); margin-bottom:20px; font-size:0.9rem; text-align:left; width:300px;"></div>
<div style="width:250px; height:2px; background:rgba(31, 162, 255, 0.2); position:relative; overflow:hidden;">
<div id="progress-bar" style="position:absolute; width:0%; height:100%; background:var(--primary-blue); box-shadow: 0 0 15px var(--primary-blue); transition: width 0.3s;"></div>
</div>
<div id="status-percent" style="margin-top:10px; font-size:0.8rem; color:var(--primary-blue); letter-spacing:2px;">0%</div>
</div>
<button class="btn-universe" onclick="startLarinsterProtocol('welcome.php')">
ATIVAR UNIVERSO LARINSTER
</button>
<p style="margin-top: 2rem; font-size: 0.9rem; opacity: 0.5;">
O que você vê hoje é apenas o início.
</p>
</section>
Preciso que tenha essas informações:
A Sala do Empreendedor de Horizonte-Sebrae deseja a todos os empreendedores, um ano repleto de bençãos! Nossa missão é transformar vidas, forte abraços a todos e boas festas.
Aline Araujo Agente de Desenvolvimento Horizonte - CE & Francklyn Souza
GEMINI
24/02/2026 às 01:08
Larinster
Prompted Neste código:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LARINSTER | Ecossistema Digital</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;700;900&display=swap" rel="stylesheet">
<style>
:root {
--bg-absolute: #050505;
--bg-deep: #0A1C2F;
--primary-blue: #1FA2FF;
--cyan-tech: #00E5FF;
--purple-futuristic: #6C63FF;
--text-main: #F5F7FA;
--glass: rgba(255, 255, 255, 0.03);
--glass-border: rgba(31, 162, 255, 0.2);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
background-color: var(--bg-absolute);
color: var(--text-main);
font-family: 'Inter', sans-serif;
overflow-x: hidden;
line-height: 1.6;
}
/* Fundo Animado */
.universe-bg {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(circle at 50% 50%, var(--bg-deep) 0%, var(--bg-absolute) 100%);
z-index: -1;
}
.glow-orb {
position: absolute;
width: 400px;
height: 400px;
background: var(--primary-blue);
filter: blur(150px);
border-radius: 50%;
opacity: 0.15;
top: 10%;
right: 10%;
animation: float 10s infinite alternate;
}
@keyframes float {
from { transform: translate(0, 0); }
to { transform: translate(-50px, 50px); }
}
/* Layout */
header {
padding: 40px;
display: flex;
justify-content: space-between;
align-items: center;
backdrop-filter: blur(10px);
position: sticky;
top: 0;
z-index: 100;
}
.logo {
font-weight: 900;
font-size: 1.5rem;
letter-spacing: 4px;
color: var(--text-main);
text-decoration: none;
}
.hero {
height: 85vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding: 20px;
}
.hero h1 {
font-size: clamp(3rem, 10vw, 6rem);
font-weight: 900;
text-transform: uppercase;
margin-bottom: 1rem;
background: linear-gradient(to bottom, #fff 30%, var(--primary-blue));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
letter-spacing: -2px;
}
.hero p {
max-width: 600px;
font-size: 1.2rem;
color: rgba(245, 247, 250, 0.7);
margin-bottom: 3rem;
}
/* Botão Principal */
.btn-universe {
padding: 20px 45px;
font-size: 1rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 2px;
color: #fff;
background: transparent;
border: 1px solid var(--glass-border);
border-radius: 4px;
cursor: pointer;
position: relative;
overflow: hidden;
transition: 0.4s;
box-shadow: 0 0 20px rgba(31, 162, 255, 0.1);
}
.btn-universe:hover {
background: var(--primary-blue);
box-shadow: 0 0 40px rgba(31, 162, 255, 0.4);
border-color: var(--cyan-tech);
transform: translateY(-3px);
}
/* Grid de Módulos */
.modules {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
padding: 100px 10%;
background: linear-gradient(to bottom, transparent, rgba(10, 28, 47, 0.5));
}
/* Ajuste para tornar os cards clicáveis */
.card-link {
text-decoration: none;
color: inherit;
display: block;
}
.card {
background: var(--glass);
border: 1px solid var(--glass-border);
padding: 40px;
border-radius: 15px;
transition: 0.3s;
height: 100%;
}
.card:hover {
border-color: var(--cyan-tech);
background: rgba(255, 255, 255, 0.05);
transform: translateY(-5px);
}
.card h3 {
color: var(--cyan-tech);
margin-bottom: 15px;
font-size: 1.4rem;
}
.status-badge {
display: inline-block;
padding: 4px 12px;
font-size: 0.7rem;
border-radius: 50px;
background: rgba(0, 229, 255, 0.1);
color: var(--cyan-tech);
margin-bottom: 20px;
border: 1px solid rgba(0, 229, 255, 0.3);
}
footer {
text-align: center;
padding: 60px;
font-size: 0.8rem;
color: rgba(245, 247, 250, 0.4);
border-top: 1px solid var(--glass-border);
}
body::before {
content: " ";
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.1) 50%),
linear-gradient(90deg, rgba(255, 0, 0, 0.02), rgba(0, 255, 0, 0.01), rgba(0, 0, 255, 0.02));
z-index: 1000;
pointer-events: none;
background-size: 100% 4px, 3px 100%;
}
</style>
</head>
<body>
<div class="universe-bg">
<div class="glow-orb"></div>
</div>
<header>
<a href="index.php" class="logo">LARINSTER</a>
<div class="nav-links">
<small style="color: var(--cyan-tech); letter-spacing: 2px;">V.1.0_ALPHA</small>
</div>
</header>
<main>
<section class="hero">
<h1>LARINSTER</h1>
<p>Não conectamos apenas dados. Organizamos relações entre pessoas, empresas e processos em um ecossistema de confiança contínua.</p>
<div id="loader-overlay" style="display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:var(--bg-absolute); z-index:2000; flex-direction:column; justify-content:center; align-items:center;">
<div id="terminal-text" style="font-family:monospace; color:var(--cyan-tech); margin-bottom:20px; font-size:0.9rem; text-align:left; width:300px;"></div>
<div style="width:250px; height:2px; background:rgba(31, 162, 255, 0.2); position:relative; overflow:hidden;">
<div id="progress-bar" style="position:absolute; width:0%; height:100%; background:var(--primary-blue); box-shadow: 0 0 15px var(--primary-blue); transition: width 0.3s;"></div>
</div>
<div id="status-percent" style="margin-top:10px; font-size:0.8rem; color:var(--primary-blue); letter-spacing:2px;">0%</div>
</div>
<button class="btn-universe" onclick="startLarinsterProtocol('welcome.php')">
ATIVAR UNIVERSO LARINSTER
</button>
<p style="margin-top: 2rem; font-size: 0.9rem; opacity: 0.5;">
O que você vê hoje é apenas o início.
</p>
</section>
<section class="modules">
<a href="transferencia.php" class="card-link">
<div class="card">
<span class="status-badge">ATIVO</span>
<h3>Transferência Inteligente</h3>
<p>Compartilhamento de documentos com consentimento explícito e rastreabilidade total.</p>
</div>
</a>
<a href="identidade.php" class="card-link">
<div class="card">
<span class="status-badge" style="color: #6C63FF; border-color: #6C63FF;">ACESSAR</span>
<h3>Identidade Digital</h3>
<p>Estruturação de perfis profissionais e organizacionais para eliminar o retrabalho burocrático.</p>
</div>
</a>
<a href="historico.php" class="card-link">
<div class="card">
<span class="status-badge" style="color: var(--primary-blue); border-color: var(--primary-blue);">HISTÓRICO</span>
<h3>Log de Protocolos</h3>
<p>Monitore todas as interações e acessos aos seus dados dentro do ecossistema.</p>
</div>
</a>
</section>
</main>
<footer>
<p>© 2025 LARINSTER - INFRAESTRUTURA DIGITAL INDEPENDENTE</p>
<p style="margin-top: 10px; letter-spacing: 3px;">CONFIANÇA . TRANSPARÊNCIA . EVOLUÇÃO</p>
</footer>
<script>
function startLarinsterProtocol(target) {
const overlay = document.getElementById('loader-overlay');
const terminal = document.getElementById('terminal-text');
const progress = document.getElementById('progress-bar');
const percentText = document.getElementById('status-percent');
overlay.style.display = 'flex';
terminal.innerHTML = ""; // Limpa o terminal para novas execuções
const messages = [
"> ESTABELECENDO CONEXÃO SEGURA...",
"> CARREGANDO NÚCLEO LARINSTER...",
"> SINCRONIZANDO NODOS DE CONFIANÇA...",
"> PROTOCOLO DE CONSENTIMENTO ATIVO.",
"> ACESSO AUTORIZADO."
];
let step = 0;
let width = 0;
const interval = setInterval(() => {
width += Math.random() * 15;
if (width > 100) width = 100;
progress.style.width = width + '%';
percentText.innerText = Math.floor(width) + '%';
if (width > (step + 1) * 20 && step < messages.length) {
terminal.innerHTML += messages[step] + "<br>";
step++;
}
if (width === 100) {
clearInterval(interval);
setTimeout(() => {
// Redireciona para a página definida (Identidade por padrão)
window.location.href = target;
}, 800);
}
}, 150);
}
</script>
</body>
</html>
Preciso que você posso modificar neste trecho:
<section class="hero">
<h1>LARINSTER</h1>
<p>Não conectamos apenas dados. Organizamos relações entre pessoas, empresas e processos em um ecossistema de confiança contínua.</p>
<div id="loader-overlay" style="display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:var(--bg-absolute); z-index:2000; flex-direction:column; justify-content:center; align-items:center;">
<div id="terminal-text" style="font-family:monospace; color:var(--cyan-tech); margin-bottom:20px; font-size:0.9rem; text-align:left; width:300px;"></div>
<div style="width:250px; height:2px; background:rgba(31, 162, 255, 0.2); position:relative; overflow:hidden;">
<div id="progress-bar" style="position:absolute; width:0%; height:100%; background:var(--primary-blue); box-shadow: 0 0 15px var(--primary-blue); transition: width 0.3s;"></div>
</div>
<div id="status-percent" style="margin-top:10px; font-size:0.8rem; color:var(--primary-blue); letter-spacing:2px;">0%</div>
</div>
<button class="btn-universe" onclick="startLarinsterProtocol('welcome.php')">
ATIVAR UNIVERSO LARINSTER
</button>
<p style="margin-top: 2rem; font-size: 0.9rem; opacity: 0.5;">
O que você vê hoje é apenas o início.
</p>
</section>
Queria essas informações:
A Sala do Empreendedor de Horizonte-Sebrae deseja a todos os empreendedores, um ano repleto de bençãos! Nossa missão é transformar vidas, forte abraços a todos e boas festas.
Aline Araujo Agente de Desenvolvimento Horizonte - CE & Francklyn Souza
GEMINI
24/02/2026 às 01:08
Larinster
Prompted Faz o mesmo estilo de dashboard.php:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>LARINSTER | Identidade Digital Estruturada</title>
<style>
:root {
--bg-absolute: #050505;
--primary-blue: #1FA2FF;
--cyan-tech: #00E5FF;
--text-main: #F5F7FA;
--glass: rgba(255, 255, 255, 0.03);
--glass-border: rgba(31, 162, 255, 0.15);
}
body {
background: var(--bg-absolute);
color: var(--text-main);
font-family: 'Inter', sans-serif;
margin: 0;
padding: 40px;
display: flex;
justify-content: center;
}
.vault-container {
width: 100%;
max-width: 800px;
}
.profile-header {
display: flex;
align-items: center;
gap: 25px;
margin-bottom: 50px;
padding: 30px;
background: linear-gradient(90deg, rgba(31, 162, 255, 0.1), transparent);
border-radius: 20px;
border: 1px solid var(--glass-border);
}
.avatar-glow {
width: 80px;
height: 80px;
background: var(--bg-absolute);
border: 2px solid var(--cyan-tech);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0 0 20px rgba(0, 229, 255, 0.3);
font-weight: bold;
font-size: 1.5rem;
}
.identity-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.data-card {
background: var(--glass);
border: 1px solid var(--glass-border);
padding: 25px;
border-radius: 15px;
display: flex;
justify-content: space-between;
align-items: center;
}
.data-info h4 {
font-size: 0.7rem;
text-transform: uppercase;
color: var(--cyan-tech);
margin-bottom: 5px;
letter-spacing: 1px;
}
.data-info p {
font-size: 1rem;
font-weight: 500;
}
/* Toggle Switch Futurista */
.switch {
position: relative;
display: inline-block;
width: 45px;
height: 24px;
}
.switch input { opacity: 0; width: 0; height: 0; }
.slider {
position: absolute;
cursor: pointer;
top: 0; left: 0; right: 0; bottom: 0;
background-color: #222;
transition: .4s;
border-radius: 34px;
}
.slider:before {
position: absolute;
content: "";
height: 16px; width: 16px;
left: 4px; bottom: 4px;
background-color: white;
transition: .4s;
border-radius: 50%;
}
input:checked + .slider { background-color: var(--primary-blue); }
input:checked + .slider:before { transform: translateX(21px); }
.section-title {
margin: 40px 0 20px;
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 2px;
color: rgba(255,255,255,0.5);
display: flex;
align-items: center;
gap: 10px;
}
.section-title::after {
content: "";
flex: 1;
height: 1px;
background: var(--glass-border);
}
</style>
</head>
<body>
<div class="vault-container">
<div class="vault-container">
<div style="margin-bottom: 20px;">
<a href="index.php" style="color: var(--cyan-tech); text-decoration: none; font-size: 0.7rem; letter-spacing: 2px; text-transform: uppercase; border: 1px solid var(--glass-border); padding: 5px 15px; border-radius: 4px; transition: 0.3s;">
← Desconectar Terminal
</a>
</div>
<div class="profile-header">
<a href="index.php" style="text-decoration: none; color: inherit;">
<div class="avatar-glow" title="Voltar ao Início">LN</div>
</a>
<div>
<h2 style="letter-spacing: 2px;">ID: lnsr_8829_alpha</h2>
<p style="font-size: 0.8rem; opacity: 0.6;">Nível de Confiança: <span style="color: var(--cyan-tech);">9.8 (Alta)</span></p>
</div>
</div>
<div class="section-title">Atributos de Identidade</div>
<div class="identity-grid">
<div class="data-card">
<div class="data-info">
<h4>Documento Identificador</h4>
<p>***.***.442-01</p>
</div>
<label class="switch">
<input type="checkbox" checked>
<span class="slider"></span>
</label>
</div>
<div class="data-card">
<div class="data-info">
<h4>Endereço Residencial</h4>
<p>Criptografado (Hashed)</p>
</div>
<label class="switch">
<input type="checkbox">
<span class="slider"></span>
</label>
</div>
<div class="data-card">
<div class="data-info">
<h4>Histórico Profissional</h4>
<p>5 Registros Ativos</p>
</div>
<label class="switch">
<input type="checkbox" checked>
<span class="slider"></span>
</label>
</div>
<div class="data-card" style="border-style: dashed; opacity: 0.5;">
<div class="data-info">
<h4>Biometria Facial</h4>
<p>Não Configurado</p>
</div>
<span style="font-size: 0.7rem; color: var(--primary-blue); cursor: pointer;">+ ATIVAR</span>
</div>
</div>
<div class="section-title">Autorizações de Terceiros</div>
<div class="data-card" style="margin-bottom: 15px;">
<div class="data-info">
<p><strong>Banco Alpha Integrator</strong></p>
<small style="opacity: 0.5;">Acesso a: Documento, Histórico Profissional</small>
</div>
<button style="background: transparent; border: 1px solid #ff4444; color: #ff4444; padding: 5px 15px; border-radius: 4px; cursor: pointer;">REVOGAR</button>
</div>
<p style="text-align: center; margin-top: 50px; font-size: 0.7rem; opacity: 0.3;">
Alterações nesta página geram um novo protocolo LNSR-UPDATE e notificam todas as entidades conectadas com acesso ativo.
</p>
</div>
</body>
</html>
GEMINI
24/02/2026 às 01:08
Larinster
Prompted Nessa página, como volta pro começo do site:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>LARINSTER | Identidade Digital Estruturada</title>
<style>
:root {
--bg-absolute: #050505;
--primary-blue: #1FA2FF;
--cyan-tech: #00E5FF;
--text-main: #F5F7FA;
--glass: rgba(255, 255, 255, 0.03);
--glass-border: rgba(31, 162, 255, 0.15);
}
body {
background: var(--bg-absolute);
color: var(--text-main);
font-family: 'Inter', sans-serif;
margin: 0;
padding: 40px;
display: flex;
justify-content: center;
}
.vault-container {
width: 100%;
max-width: 800px;
}
.profile-header {
display: flex;
align-items: center;
gap: 25px;
margin-bottom: 50px;
padding: 30px;
background: linear-gradient(90deg, rgba(31, 162, 255, 0.1), transparent);
border-radius: 20px;
border: 1px solid var(--glass-border);
}
.avatar-glow {
width: 80px;
height: 80px;
background: var(--bg-absolute);
border: 2px solid var(--cyan-tech);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0 0 20px rgba(0, 229, 255, 0.3);
font-weight: bold;
font-size: 1.5rem;
}
.identity-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.data-card {
background: var(--glass);
border: 1px solid var(--glass-border);
padding: 25px;
border-radius: 15px;
display: flex;
justify-content: space-between;
align-items: center;
}
.data-info h4 {
font-size: 0.7rem;
text-transform: uppercase;
color: var(--cyan-tech);
margin-bottom: 5px;
letter-spacing: 1px;
}
.data-info p {
font-size: 1rem;
font-weight: 500;
}
/* Toggle Switch Futurista */
.switch {
position: relative;
display: inline-block;
width: 45px;
height: 24px;
}
.switch input { opacity: 0; width: 0; height: 0; }
.slider {
position: absolute;
cursor: pointer;
top: 0; left: 0; right: 0; bottom: 0;
background-color: #222;
transition: .4s;
border-radius: 34px;
}
.slider:before {
position: absolute;
content: "";
height: 16px; width: 16px;
left: 4px; bottom: 4px;
background-color: white;
transition: .4s;
border-radius: 50%;
}
input:checked + .slider { background-color: var(--primary-blue); }
input:checked + .slider:before { transform: translateX(21px); }
.section-title {
margin: 40px 0 20px;
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 2px;
color: rgba(255,255,255,0.5);
display: flex;
align-items: center;
gap: 10px;
}
.section-title::after {
content: "";
flex: 1;
height: 1px;
background: var(--glass-border);
}
</style>
</head>
<body>
<div class="vault-container">
<div class="profile-header">
<div class="avatar-glow">LN</div>
<div>
<h2 style="letter-spacing: 2px;">ID: lnsr_8829_alpha</h2>
<p style="font-size: 0.8rem; opacity: 0.6;">Nível de Confiança: <span style="color: var(--cyan-tech);">9.8 (Alta)</span></p>
</div>
</div>
<div class="section-title">Atributos de Identidade</div>
<div class="identity-grid">
<div class="data-card">
<div class="data-info">
<h4>Documento Identificador</h4>
<p>***.***.442-01</p>
</div>
<label class="switch">
<input type="checkbox" checked>
<span class="slider"></span>
</label>
</div>
<div class="data-card">
<div class="data-info">
<h4>Endereço Residencial</h4>
<p>Criptografado (Hashed)</p>
</div>
<label class="switch">
<input type="checkbox">
<span class="slider"></span>
</label>
</div>
<div class="data-card">
<div class="data-info">
<h4>Histórico Profissional</h4>
<p>5 Registros Ativos</p>
</div>
<label class="switch">
<input type="checkbox" checked>
<span class="slider"></span>
</label>
</div>
<div class="data-card" style="border-style: dashed; opacity: 0.5;">
<div class="data-info">
<h4>Biometria Facial</h4>
<p>Não Configurado</p>
</div>
<span style="font-size: 0.7rem; color: var(--primary-blue); cursor: pointer;">+ ATIVAR</span>
</div>
</div>
<div class="section-title">Autorizações de Terceiros</div>
<div class="data-card" style="margin-bottom: 15px;">
<div class="data-info">
<p><strong>Banco Alpha Integrator</strong></p>
<small style="opacity: 0.5;">Acesso a: Documento, Histórico Profissional</small>
</div>
<button style="background: transparent; border: 1px solid #ff4444; color: #ff4444; padding: 5px 15px; border-radius: 4px; cursor: pointer;">REVOGAR</button>
</div>
<p style="text-align: center; margin-top: 50px; font-size: 0.7rem; opacity: 0.3;">
Alterações nesta página geram um novo protocolo LNSR-UPDATE e notificam todas as entidades conectadas com acesso ativo.
</p>
</div>
</body>
</html>
GEMINI
24/02/2026 às 01:08
Larinster
Prompted Sim, aqui estamos apenas simulando tudo, nesse meio de simulação, seria ideal levai o botão "ativar universo larinster" para uma página de boas vindos ao universo dentro da própria larinster, tem algo em ideia?
GEMINI
24/02/2026 às 01:08
Larinster
Prompted Pode atualizar neste código sem muitas alterações?
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LARINSTER | Ecossistema Digital</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;700;900&display=swap" rel="stylesheet">
<style>
:root {
--bg-absolute: #050505;
--bg-deep: #0A1C2F;
--primary-blue: #1FA2FF;
--cyan-tech: #00E5FF;
--purple-futuristic: #6C63FF;
--text-main: #F5F7FA;
--glass: rgba(255, 255, 255, 0.03);
--glass-border: rgba(31, 162, 255, 0.2);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
background-color: var(--bg-absolute);
color: var(--text-main);
font-family: 'Inter', sans-serif;
overflow-x: hidden;
line-height: 1.6;
}
/* Fundo Animado */
.universe-bg {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(circle at 50% 50%, var(--bg-deep) 0%, var(--bg-absolute) 100%);
z-index: -1;
}
.glow-orb {
position: absolute;
width: 400px;
height: 400px;
background: var(--primary-blue);
filter: blur(150px);
border-radius: 50%;
opacity: 0.15;
top: 10%;
right: 10%;
animation: float 10s infinite alternate;
}
@keyframes float {
from { transform: translate(0, 0); }
to { transform: translate(-50px, 50px); }
}
/* Layout */
header {
padding: 40px;
display: flex;
justify-content: space-between;
align-items: center;
backdrop-filter: blur(10px);
position: sticky;
top: 0;
z-index: 100;
}
.logo {
font-weight: 900;
font-size: 1.5rem;
letter-spacing: 4px;
color: var(--text-main);
text-decoration: none;
}
.hero {
height: 85vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding: 20px;
}
.hero h1 {
font-size: clamp(3rem, 10vw, 6rem);
font-weight: 900;
text-transform: uppercase;
margin-bottom: 1rem;
background: linear-gradient(to bottom, #fff 30%, var(--primary-blue));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
letter-spacing: -2px;
}
.hero p {
max-width: 600px;
font-size: 1.2rem;
color: rgba(245, 247, 250, 0.7);
margin-bottom: 3rem;
}
/* Botão Principal */
.btn-universe {
padding: 20px 45px;
font-size: 1rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 2px;
color: #fff;
background: transparent;
border: 1px solid var(--glass-border);
border-radius: 4px;
cursor: pointer;
position: relative;
overflow: hidden;
transition: 0.4s;
box-shadow: 0 0 20px rgba(31, 162, 255, 0.1);
}
.btn-universe:hover {
background: var(--primary-blue);
box-shadow: 0 0 40px rgba(31, 162, 255, 0.4);
border-color: var(--cyan-tech);
transform: translateY(-3px);
}
/* Grid de Módulos */
.modules {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
padding: 100px 10%;
background: linear-gradient(to bottom, transparent, rgba(10, 28, 47, 0.5));
}
.card {
background: var(--glass);
border: 1px solid var(--glass-border);
padding: 40px;
border-radius: 15px;
transition: 0.3s;
}
.card:hover {
border-color: var(--cyan-tech);
background: rgba(255, 255, 255, 0.05);
}
.card h3 {
color: var(--cyan-tech);
margin-bottom: 15px;
font-size: 1.4rem;
}
.status-badge {
display: inline-block;
padding: 4px 12px;
font-size: 0.7rem;
border-radius: 50px;
background: rgba(0, 229, 255, 0.1);
color: var(--cyan-tech);
margin-bottom: 20px;
border: 1px solid rgba(0, 229, 255, 0.3);
}
footer {
text-align: center;
padding: 60px;
font-size: 0.8rem;
color: rgba(245, 247, 250, 0.4);
border-top: 1px solid var(--glass-border);
}
/* Efeito de Scanline */
body::before {
content: " ";
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.1) 50%),
linear-gradient(90deg, rgba(255, 0, 0, 0.02), rgba(0, 255, 0, 0.01), rgba(0, 0, 255, 0.02));
z-index: 1000;
pointer-events: none;
background-size: 100% 4px, 3px 100%;
}
</style>
</head>
<body>
<div class="universe-bg">
<div class="glow-orb"></div>
</div>
<header>
<a href="#" class="logo">LARINSTER</a>
<div class="nav-links">
<small style="color: var(--cyan-tech); letter-spacing: 2px;">V.1.0_ALPHA</small>
</div>
</header>
<main>
<section class="hero">
<h1>LARINSTER</h1>
<p>Não conectamos apenas dados. Organizados relações entre pessoas, empresas e processos em um ecossistema de confiança contínua.</p>
<div id="loader-overlay" style="display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:var(--bg-absolute); z-index:2000; flex-direction:column; justify-content:center; align-items:center;">
<div id="terminal-text" style="font-family:monospace; color:var(--cyan-tech); margin-bottom:20px; font-size:0.9rem; text-align:left; width:300px;"></div>
<div style="width:250px; height:2px; background:rgba(31, 162, 255, 0.2); position:relative; overflow:hidden;">
<div id="progress-bar" style="position:absolute; width:0%; height:100%; background:var(--primary-blue); box-shadow: 0 0 15px var(--primary-blue); transition: width 0.3s;"></div>
</div>
<div id="status-percent" style="margin-top:10px; font-size:0.8rem; color:var(--primary-blue); letter-spacing:2px;">0%</div>
</div>
<button class="btn-universe" onclick="startLarinsterProtocol()">
ATIVAR UNIVERSO LARINSTER
</button>
<p style="margin-top: 2rem; font-size: 0.9rem; opacity: 0.5;">
O que você vê hoje é apenas o início.
</p>
</section>
<section class="modules">
<div class="card">
<span class="status-badge">ATIVO</span>
<h3>Transferência Inteligente</h3>
<p>Compartilhamento de documentos com consentimento explícito e rastreabilidade total.</p>
</div>
<div class="card">
<span class="status-badge" style="color: #6C63FF; border-color: #6C63FF;">EM EXPANSÃO</span>
<h3>Identidade Digital</h3>
<p>Estruturação de perfis profissionais e organizacionais para eliminar o retrabalho burocrático.</p>
</div>
<div class="card">
<span class="status-badge" style="color: #666; border-color: #444;">EM BREVE</span>
<h3>Módulo MEI</h3>
<p>Gestão simplificada de processos para pequenos negócios dentro da infraestrutura Larinster.</p>
</div>
</section>
</main>
<footer>
<p>© 2025 LARINSTER - INFRAESTRUTURA DIGITAL INDEPENDENTE</p>
<p style="margin-top: 10px; letter-spacing: 3px;">CONFIANÇA . TRANSPARÊNCIA . EVOLUÇÃO</p>
</footer>
<script>
function startLarinsterProtocol() {
const overlay = document.getElementById('loader-overlay');
const terminal = document.getElementById('terminal-text');
const progress = document.getElementById('progress-bar');
const percentText = document.getElementById('status-percent');
overlay.style.display = 'flex';
const messages = [
"> ESTABELECENDO CONEXÃO SEGURA...",
"> CARREGANDO NÚCLEO LARINSTER...",
"> SINCRONIZANDO NODOS DE CONFIANÇA...",
"> PROTOCOLO DE CONSENTIMENTO ATIVO.",
"> ACESSO AUTORIZADO."
];
let step = 0;
let width = 0;
const interval = setInterval(() => {
// Atualiza barra de progresso
width += Math.random() * 15;
if (width > 100) width = 100;
progress.style.width = width + '%';
percentText.innerText = Math.floor(width) + '%';
// Atualiza mensagens de terminal
if (width > (step + 1) * 20 && step < messages.length) {
terminal.innerHTML += messages[step] + "<br>";
step++;
}
if (width === 100) {
clearInterval(interval);
setTimeout(() => {
// Aqui você redireciona para a próxima página do ecossistema
alert("Universo Larinster Ativado com Sucesso.");
// window.location.href = 'dashboard.php';
overlay.style.opacity = '0';
setTimeout(() => overlay.style.display = 'none', 500);
}, 800);
}
}, 200);
}
</script>
</body>
</html>
GEMINI
24/02/2026 às 01:08
Larinster
Prompted 🧬 LARINSTER — RESUMO OFICIAL DO SITE PRINCIPAL
🎯 Propósito do site
O site da Larinster não é apenas institucional.
Ele deve transmitir que a Larinster é:
um ecossistema tecnológico
uma camada inteligente de conexão
uma infraestrutura de confiança
um projeto em construção contínua, com visão de longo prazo
Quem entra no site precisa sair pensando:
“Isso não é só uma empresa. É um novo padrão.”
🧠 Mensagem central (essência)
Larinster é o ecossistema que redefine as conexões entre pessoas, empresas e processos.
Frase complementar:
A Larinster não nasceu para competir no mercado.
Nasceu para redefinir os limites entre pessoas, empresas e processos.
🧩 O que a Larinster é
A Larinster é uma plataforma em desenvolvimento que atua como ponte inteligente entre:
pessoas físicas
profissionais
empresas
organizações
Seu foco é simplificar, organizar e tornar confiáveis processos que hoje são fragmentados, repetitivos e burocráticos.
🚀 O que estamos desenvolvendo hoje
O site deve deixar claro que a Larinster está em evolução, com módulos como:
🔹 Transferência inteligente de documentos
Compartilhamento de documentos entre pessoas e empresas
Consentimento explícito
Histórico e rastreabilidade
Redução de retrabalho e repetição de processos
🔹 Módulos em expansão
MEIs e pequenos negócios
Gestão de processos entre empresas
Identidade digital estruturada
Autorização e controle de acesso
Histórico profissional e organizacional
🌱 Missão
Criar uma infraestrutura digital que simplifique relações entre pessoas e empresas, organizando dados, autorizações e processos de forma transparente, segura e inteligente.
🎯 Objetivo
Reduzir burocracia
Eliminar retrabalho entre organizações
Centralizar autorizações e históricos
Criar um padrão confiável de interação entre empresas e indivíduos
🛤️ Metas
Construir um ecossistema modular e escalável
Iniciar pelo Brasil com visão global
Desenvolver uma base tecnológica independente
Tornar a Larinster referência em confiança digital e processos interorganizacionais
🔮 Visão de futuro
O site deve deixar claro que:
A Larinster está em fase de construção
Novos módulos serão ativados
Novas integrações estão previstas
O ecossistema crescerá de forma contínua
Mensagem sugerida:
O que você vê hoje é apenas o início. A Larinster está sendo construída para acompanhar o futuro das relações digitais.
🧠 Diferencial estratégico
Não é um sistema fechado
Não depende de um único setor
Não é apenas um software
Funciona como infraestrutura
Frase forte:
A Larinster não conecta apenas dados.
Ela organiza relações.
🔘 CTA PRINCIPAL
Sempre centralizado e forte:
ATIVAR UNIVERSO LARINSTER
CTA secundário (opcional):
Acompanhar evolução
Entrar para o ecossistema
Solicitar acesso futuro
🎨 CORES PADRÃO DA LARINSTER (RECOMENDADO)
🔹 Primárias
Azul profundo: #0A1C2F
Azul elétrico / brilho: #1FA2FF
🔹 Secundárias
Ciano tecnológico: #00E5FF
Roxo futurista (detalhes): #6C63FF
🔹 Neutras
Preto absoluto: #050505
Cinza escuro: #0F172A
Branco suave: #F5F7FA
✨ Estilo visual esperado
Para o gerador de IA, descreva assim:
Futurista
Tecnológico
Minimalista
Tipografia moderna (sans-serif)
Animações suaves
Efeitos de luz azul
Gradientes discretos
Sensação de sistema, não de site comum
🧬 FRASE FINAL PARA O PROMPT DA IA
Se quiser uma frase única para colar no prompt do gerador:
“Criar um site futurista, tecnológico e impactante para a Larinster, um ecossistema digital em construção que redefine conexões entre pessoas, empresas e processos, com foco em confiança, consentimento, modularidade e visão de longo prazo.”
GEMINI
24/02/2026 às 01:08
Larinster
Prompted Gostei, mas seria ideal se eu pudesse controlar o telefone pela pagina, exemplo: ao ligar o telefone, seria necessario informar um codigo pra liberar o acesso a cada vez que eu reiniciar o telefone, ou quando o telefone não é pra ninguém ter acesso, no sistema ter uma opção para bloquear e ter uma informação que o sistema foi bloqueado pela Larinster e para desbloquear é necessário informar um novo código gerado pelo sistema
GEMINI
24/02/2026 às 01:08
Larinster
Prompted Aquele aviso de erro não incomoda na verdade, mas digamos que eu queira implementar isso tudo da Larinster no telefone, como ficaria a parte de conectividade ao banco de dados? Seria um chamado via php tipo, uma pagina no site?
GEMINI
24/02/2026 às 01:08
Larinster
Prompted Na verdade a minha ideia no começo era conectar o meu telefone a um banco de dados ou ao dominio larinster.com e na tela aparecer uma logomarca informando que o telefone está conectada ao sistema larinster
GEMINI
24/02/2026 às 01:08
Larinster
Prompted Vamos atualizar apenas este trecho, mais não precisa incluir a equipe Francklyn Souza, pois tudo é através da equipe Larinster, a antiga equipe não deverá ser citada:
<div style="font-size: 1.05rem; color: #1e293b; line-height: 1.8; margin-bottom: 25px;">
Prezado Empreendedor Horizontino,<br>
A <strong>Sala do Empreendedor de Horizonte</strong> informa que sua plataforma oficial de atendimento está sendo atualizada pela <strong>Equipe Francklyn Souza</strong>. Nesta nova fase, o sistema passa a operar sob a <strong>Tecnologia Larinster</strong>, uma evolução técnica projetada para oferecer maior estabilidade, agilidade e recursos avançados para o seu negócio.
</div>
GEMINI
24/02/2026 às 01:08
Larinster
Prompted O que está incomodando muito é essa frase " A Sala do Empreendedor de Horizonte, em parceria com a Prefeitura Municipal e o Sebrae, informa que sua nova plataforma oficial de atendimento está sendo desenvolvida através da Tecnologia Larinster" quem deverá informar é somente a sala do empreendedor ou os desenvolvedores, pois quem criava antes era a equipe Francklyn Souza, mas esta equipe também utiliza hoje em dia a tecnologia Larinster em suas plataformas, por isso estamos atualizando esta nova plataforma:
<div class="comunicado-transicao" style="margin-bottom: 35px; padding: 40px; background: #ffffff; border-radius: 24px; border: 1px solid #e2e8f0; position: relative; overflow: hidden; box-shadow: 0 20px 40px rgba(0,0,0,0.04);">
<div style="position: absolute; top: 0; left: 0; width: 100%; height: 6px; background: linear-gradient(90deg, #0054a6, #ffcb05, #0054a6);"></div>
<div style="display: flex; align-items: center; gap: 18px; margin-bottom: 25px;">
<div style="background: #f8fafc; color: var(--sebrae-blue); width: 55px; height: 55px; border-radius: 15px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; border: 1px solid #e2e8f0;">
<i class="fas fa-sync-alt"></i>
</div>
<div>
<h4 style="color: var(--sebrae-blue); font-weight: 900; margin: 0; text-transform: uppercase; font-size: 1.05rem; letter-spacing: 0.5px;">
Nova Plataforma Digital
</h4>
<p style="margin: 0; font-size: 0.75rem; color: #64748b; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px;">Sala do Empreendedor • Prefeitura • Sebrae</p>
</div>
</div>
<div style="font-size: 1.05rem; color: #1e293b; line-height: 1.8; margin-bottom: 25px;">
Prezado Empreendedor Horizontino,<br>
A <strong>Sala do Empreendedor de Horizonte</strong>, em parceria com a <strong>Prefeitura Municipal</strong> e o <strong>Sebrae</strong>, informa que sua nova plataforma oficial de atendimento está sendo desenvolvida através da <strong>Tecnologia Larinster</strong>. Esta transição visa modernizar os processos públicos e oferecer uma ferramenta de alta performance para o seu negócio.
</div>
<div style="background: #f8fafc; padding: 25px; border-radius: 16px; border: 1px solid #e2e8f0; border-left: 5px solid var(--sebrae-blue);">
<p style="font-size: 0.95rem; color: #475569; line-height: 1.7; margin: 0;">
<i class="fas fa-layer-group" style="color: var(--sebrae-blue); margin-right: 8px;"></i>
A nova arquitetura do sistema, projetada pela <strong>equipe técnica da Larinster</strong>, permitirá uma integração mais fluida entre o município e os empreendedores. A plataforma foi desenhada para garantir segurança de dados e agilidade nos serviços de suporte empresarial, elevando o padrão de eficiência tecnológica de Horizonte.
</p>
</div>
<div style="margin-top: 30px; display: flex; flex-wrap: wrap; gap: 12px; padding-top: 20px; border-top: 1px solid #f1f5f9;">
<div style="display: flex; align-items: center; gap: 8px; background: #ffffff; color: #475569; padding: 7px 14px; border-radius: 20px; font-size: 0.65rem; font-weight: 800; border: 1px solid #e2e8f0;">
<i class="fas fa-city" style="color: var(--sebrae-blue);"></i> PREFEITURA DE HORIZONTE
</div>
<div style="display: flex; align-items: center; gap: 8px; background: #ffffff; color: #475569; padding: 7px 14px; border-radius: 20px; font-size: 0.65rem; font-weight: 800; border: 1px solid #e2e8f0;">
<i class="fas fa-lightbulb" style="color: #ffcb05;"></i> APOIO SEBRAE
</div>
<div style="display: flex; align-items: center; gap: 8px; background: #f1f5f9; color: var(--sebrae-blue); padding: 7px 14px; border-radius: 20px; font-size: 0.65rem; font-weight: 800; border: 1px solid #d1d5db;">
<i class="fas fa-code"></i> TECNOLOGIA LARINSTER
</div>
</div>
</div>
GEMINI
24/02/2026 às 01:08
Larinster
Prompted Lembra que estamos falando da página de desenvolvimento, a Larinster não pode ter muitas informações, e essa parte pode ser melhorada:
<div class="comunicado-transicao" style="margin-bottom: 35px; padding: 40px; background: #ffffff; border-radius: 24px; border: 1px solid #e2e8f0; position: relative; overflow: hidden; box-shadow: 0 20px 40px rgba(0,0,0,0.04);">
<div style="position: absolute; top: 0; left: 0; width: 100%; height: 6px; background: linear-gradient(90deg, #0054a6, #ffcb05, #0054a6);"></div>
<div style="display: flex; align-items: center; gap: 18px; margin-bottom: 25px;">
<div style="background: #f8fafc; color: var(--sebrae-blue); width: 55px; height: 55px; border-radius: 15px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; border: 1px solid #e2e8f0;">
<i class="fas fa-microchip"></i>
</div>
<div>
<h4 style="color: var(--sebrae-blue); font-weight: 900; margin: 0; text-transform: uppercase; font-size: 1.05rem; letter-spacing: 0.5px;">
Nova Plataforma em Desenvolvimento
</h4>
<p style="margin: 0; font-size: 0.75rem; color: #64748b; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px;">Sala do Empreendedor • Prefeitura • Sebrae</p>
</div>
</div>
<div style="font-size: 1.05rem; color: #1e293b; line-height: 1.8; margin-bottom: 25px;">
Prezado Empreendedor Horizontino,<br>
A <strong>Sala do Empreendedor de Horizonte</strong>, em parceria com a <strong>Prefeitura Municipal</strong> e o <strong>Sebrae</strong>, informa que sua nova plataforma oficial de atendimento está sendo desenvolvida através da <strong>Tecnologia Larinster</strong>. Esta iniciativa visa modernizar os processos públicos, oferecendo uma ferramenta de alta performance para o seu negócio.
</div>
<div style="background: #f8fafc; padding: 25px; border-radius: 16px; border: 1px solid #e2e8f0; border-left: 5px solid var(--sebrae-blue);">
<p style="font-size: 0.95rem; color: #475569; line-height: 1.7; margin: 0;">
<i class="fas fa-code" style="color: var(--sebrae-blue); margin-right: 8px;"></i>
A <strong>Larinster</strong> é uma unidade de engenharia de software focada em arquiteturas de dados robustas. A nova estrutura do sistema, projetada por sua equipe técnica, foi desenhada para garantir máxima segurança de dados e agilidade nos serviços de formalização empresarial, elevando o padrão de eficiência tecnológica da nossa cidade.
</p>
</div>
<div style="margin-top: 30px; display: flex; flex-wrap: wrap; gap: 12px; padding-top: 20px; border-top: 1px solid #f1f5f9;">
<div style="display: flex; align-items: center; gap: 8px; background: #f1f5f9; color: #475569; padding: 7px 14px; border-radius: 20px; font-size: 0.65rem; font-weight: 800; border: 1px solid #e2e8f0;">
<i class="fas fa-city"></i> PREFEITURA DE HORIZONTE
</div>
<div style="display: flex; align-items: center; gap: 8px; background: #f1f5f9; color: #475569; padding: 7px 14px; border-radius: 20px; font-size: 0.65rem; font-weight: 800; border: 1px solid #e2e8f0;">
<i class="fas fa-lightbulb"></i> APOIO SEBRAE
</div>
<div style="display: flex; align-items: center; gap: 8px; background: #0054a6; color: #ffffff; padding: 7px 14px; border-radius: 20px; font-size: 0.65rem; font-weight: 800; box-shadow: 0 4px 10px rgba(0,84,166,0.1);">
<i class="fas fa-terminal"></i> TECNOLOGIA LARINSTER
</div>
</div>
</div>
GEMINI
24/02/2026 às 01:08
Larinster
Prompted Vamos as correções, nesta parte a prefeitura e nem o sebrae está por trás do desenvolvimento da plataforma:
:: Prezado Empreendedor Horizontino,
A Sala do Empreendedor de Horizonte, em parceria com a Prefeitura Municipal e o Sebrae, informa que sua nova plataforma oficial de atendimento está sendo desenvolvida através da Tecnologia Larinster. Esta transição visa modernizar os processos públicos e oferecer uma ferramenta de alta performance para o seu negócio.::
Neste parte, pode informar sobre a Larinster em poucas palavras e o desenvolvimento da plataforma:
::A nova arquitetura do sistema, projetada pela equipe técnica da Larinster, permitirá uma integração mais fluida entre o município e os empreendedores. A plataforma foi desenhada para garantir segurança de dados e agilidade nos serviços de formalização e suporte empresarial, elevando o padrão de eficiência da nossa cidade.:::
Agora pode atualizar:
<div class="comunicado-transicao" style="margin-bottom: 35px; padding: 40px; background: #ffffff; border-radius: 24px; border: 1px solid #e2e8f0; position: relative; overflow: hidden; box-shadow: 0 20px 40px rgba(0,0,0,0.04);">
<div style="position: absolute; top: 0; left: 0; width: 100%; height: 6px; background: linear-gradient(90deg, #0054a6, #ffcb05, #0054a6);"></div>
<div style="display: flex; align-items: center; gap: 18px; margin-bottom: 25px;">
<div style="background: #f8fafc; color: var(--sebrae-blue); width: 55px; height: 55px; border-radius: 15px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; border: 1px solid #e2e8f0;">
<i class="fas fa-project-diagram"></i>
</div>
<div>
<h4 style="color: var(--sebrae-blue); font-weight: 900; margin: 0; text-transform: uppercase; font-size: 1.05rem; letter-spacing: 0.5px;">
Evolução do Atendimento Digital
</h4>
<p style="margin: 0; font-size: 0.75rem; color: #64748b; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px;">Sala do Empreendedor • Prefeitura • Sebrae</p>
</div>
</div>
<div style="font-size: 1.05rem; color: #1e293b; line-height: 1.8; margin-bottom: 25px;">
Prezado Empreendedor Horizontino,<br>
A <strong>Sala do Empreendedor de Horizonte</strong>, em parceria com a <strong>Prefeitura Municipal</strong> e o <strong>Sebrae</strong>, informa que sua nova plataforma oficial de atendimento está sendo desenvolvida através da <strong>Tecnologia Larinster</strong>. Esta transição visa modernizar os processos públicos e oferecer uma ferramenta de alta performance para o seu negócio.
</div>
<div style="background: #f8fafc; padding: 25px; border-radius: 16px; border: 1px solid #e2e8f0; border-left: 5px solid var(--sebrae-blue);">
<p style="font-size: 0.95rem; color: #475569; line-height: 1.7; margin: 0;">
<i class="fas fa-code-branch" style="color: var(--sebrae-blue); margin-right: 8px;"></i>
A nova arquitetura do sistema, projetada pela <strong>equipe técnica da Larinster</strong>, permitirá uma integração mais fluida entre o município e os empreendedores. A plataforma foi desenhada para garantir segurança de dados e agilidade nos serviços de formalização e suporte empresarial, elevando o padrão de eficiência da nossa cidade.
</p>
</div>
<div style="margin-top: 30px; display: flex; flex-wrap: wrap; gap: 12px; padding-top: 20px; border-top: 1px solid #f1f5f9;">
<div style="display: flex; align-items: center; gap: 8px; background: #f1f5f9; color: #475569; padding: 7px 14px; border-radius: 20px; font-size: 0.65rem; font-weight: 800; border: 1px solid #e2e8f0;">
<i class="fas fa-city"></i> PREFEITURA DE HORIZONTE
</div>
<div style="display: flex; align-items: center; gap: 8px; background: #f1f5f9; color: #475569; padding: 7px 14px; border-radius: 20px; font-size: 0.65rem; font-weight: 800; border: 1px solid #e2e8f0;">
<i class="fas fa-lightbulb"></i> APOIO SEBRAE
</div>
<div style="display: flex; align-items: center; gap: 8px; background: #0054a6; color: #ffffff; padding: 7px 14px; border-radius: 20px; font-size: 0.65rem; font-weight: 800; box-shadow: 0 4px 10px rgba(0,84,166,0.1);">
<i class="fas fa-terminal"></i> TECNOLOGIA LARINSTER
</div>
</div>
</div>
GEMINI
24/02/2026 às 01:08
Larinster
Prompted A plataforma está sendo desenvolvida pela através da tecnologia larinster, o sebrae, sala do empreendedor e prefeitura não fazem parte da Larinster, pode atualizar:
<div class="comunicado-transicao" style="margin-bottom: 35px; padding: 40px; background: #ffffff; border-radius: 24px; border: 1px solid #e2e8f0; position: relative; overflow: hidden; box-shadow: 0 20px 40px rgba(0,0,0,0.04);">
<div style="position: absolute; top: 0; left: 0; width: 100%; height: 6px; background: linear-gradient(90deg, #0054a6, #ffcb05, #0054a6);"></div>
<div style="display: flex; align-items: center; gap: 18px; margin-bottom: 25px;">
<div style="background: #f8fafc; color: var(--sebrae-blue); width: 55px; height: 55px; border-radius: 15px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; border: 1px solid #e2e8f0;">
<i class="fas fa-tools"></i>
</div>
<div>
<h4 style="color: var(--sebrae-blue); font-weight: 900; margin: 0; text-transform: uppercase; font-size: 1.05rem; letter-spacing: 0.5px;">
Nova Plataforma Digital
</h4>
<p style="margin: 0; font-size: 0.75rem; color: #64748b; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px;">Desenvolvido por Larinster • Horizonte • Sebrae</p>
</div>
</div>
<div style="font-size: 1.05rem; color: #1e293b; line-height: 1.8; margin-bottom: 25px;">
Prezado Empreendedor Horizontino,<br>
Informamos que a <strong>Sala do Empreendedor de Horizonte</strong> está passando por uma importante atualização tecnológica. Em parceria com a <strong>Prefeitura Municipal</strong> e o <strong>Sebrae</strong>, a <strong>Larinster está desenvolvendo a nova plataforma oficial</strong> de atendimento ao contribuinte, trazendo o que há de mais moderno em gestão de dados e agilidade processual.
</div>
<div style="background: #f8fafc; padding: 25px; border-radius: 16px; border: 1px solid #e2e8f0; border-left: 5px solid var(--sebrae-yellow);">
<p style="font-size: 0.95rem; color: #475569; line-height: 1.7; margin: 0;">
<i class="fas fa-laptop-code" style="color: var(--sebrae-blue); margin-right: 8px;"></i>
Este novo ecossistema digital, projetado pela equipe técnica da <strong>Larinster</strong>, visa unificar os serviços da Sala do Empreendedor em um ambiente seguro e intuitivo. Nosso objetivo é simplificar a jornada do empreendedor local, garantindo eficiência máxima desde a formalização até o suporte à gestão do seu negócio.
</p>
</div>
<div style="margin-top: 30px; display: flex; flex-wrap: wrap; gap: 12px; padding-top: 20px; border-top: 1px solid #f1f5f9;">
<div style="display: flex; align-items: center; gap: 8px; background: #ffffff; color: #475569; padding: 7px 14px; border-radius: 20px; font-size: 0.65rem; font-weight: 800; border: 1px solid #e2e8f0;">
<i class="fas fa-city" style="color: var(--sebrae-blue);"></i> GESTÃO MUNICIPAL
</div>
<div style="display: flex; align-items: center; gap: 8px; background: #ffffff; color: #475569; padding: 7px 14px; border-radius: 20px; font-size: 0.65rem; font-weight: 800; border: 1px solid #e2e8f0;">
<i class="fas fa-lightbulb" style="color: #ffcb05;"></i> APOIO SEBRAE
</div>
<div style="display: flex; align-items: center; gap: 8px; background: var(--sebrae-blue); color: #ffffff; padding: 7px 14px; border-radius: 20px; font-size: 0.65rem; font-weight: 800; box-shadow: 0 4px 10px rgba(0,84,166,0.1);">
<i class="fas fa-code"></i> DESENVOLVIMENTO LARINSTER
</div>
</div>
</div>
GEMINI
24/02/2026 às 01:08
Larinster
Prompted Ainda pode melhorar, só precisa informar que a Larinster está desenvolvendo a nova plataforma da sala, pode atualizar:
<div class="comunicado-transicao" style="margin-bottom: 35px; padding: 40px; background: #ffffff; border-radius: 24px; border: 1px solid #e2e8f0; position: relative; overflow: hidden; box-shadow: 0 20px 40px rgba(0,0,0,0.04);">
<div style="position: absolute; top: 0; left: 0; width: 100%; height: 6px; background: linear-gradient(90deg, #0054a6, #ffcb05, #0054a6);"></div>
<div style="display: flex; align-items: center; gap: 18px; margin-bottom: 25px;">
<div style="background: #f0f7ff; color: var(--sebrae-blue); width: 55px; height: 55px; border-radius: 15px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; border: 1px solid #e0e7ff; box-shadow: inset 0 0 10px rgba(0,84,166,0.05);">
<i class="fas fa-handshake"></i>
</div>
<div>
<h4 style="color: var(--sebrae-blue); font-weight: 900; margin: 0; text-transform: uppercase; font-size: 1.05rem; letter-spacing: 0.5px;">
Aliança Estratégica Horizonte
</h4>
<p style="margin: 0; font-size: 0.75rem; color: #64748b; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px;">Prefeitura • Sebrae • Larinster</p>
</div>
</div>
<div style="font-size: 1.05rem; color: #1e293b; line-height: 1.8; margin-bottom: 25px;">
Prezado Empreendedor Horizontino,<br>
A <strong>Sala do Empreendedor de Horizonte</strong>, em um esforço conjunto com a <strong>Prefeitura Municipal</strong> e o <strong>Sebrae</strong>, reafirma seu compromisso com a desburocratização e o fomento econômico local. Para elevar o padrão do nosso atendimento, integramos oficialmente a
<strong style="color: var(--sebrae-blue);">Arquitetura de Dados Larinster</strong> ao nosso ecossistema de serviços.
</div>
<div style="background: linear-gradient(to right, #f8fafc, #ffffff); padding: 25px; border-radius: 16px; border: 1px solid #f1f5f9; border-left: 5px solid var(--sebrae-blue);">
<p style="font-size: 0.95rem; color: #475569; line-height: 1.7; margin: 0;">
<i class="fas fa-university" style="color: var(--sebrae-blue); margin-right: 8px;"></i>
Esta evolução tecnológica otimiza a integração entre o município e os órgãos reguladores, garantindo que o micro e pequeno empresário tenha acesso a uma plataforma <strong>ágil, transparente e moderna</strong>. Sob o suporte técnico da Larinster, transformamos a complexidade tributária em simplicidade digital para o crescimento do seu negócio.
</p>
</div>
<div style="margin-top: 30px; display: flex; flex-wrap: wrap; gap: 12px; padding-top: 20px; border-top: 1px solid #f1f5f9;">
<div style="display: flex; align-items: center; gap: 8px; background: #f1f5f9; color: #475569; padding: 7px 14px; border-radius: 20px; font-size: 0.65rem; font-weight: 800; border: 1px solid #e2e8f0;">
<i class="fas fa-city" style="color: var(--sebrae-blue);"></i> PREFEITURA DE HORIZONTE
</div>
<div style="display: flex; align-items: center; gap: 8px; background: #f1f5f9; color: #475569; padding: 7px 14px; border-radius: 20px; font-size: 0.65rem; font-weight: 800; border: 1px solid #e2e8f0;">
<i class="fas fa-lightbulb" style="color: #ffcb05;"></i> PARCEIRO SEBRAE
</div>
<div style="display: flex; align-items: center; gap: 8px; background: #0054a6; color: #ffffff; padding: 7px 14px; border-radius: 20px; font-size: 0.65rem; font-weight: 800; box-shadow: 0 4px 10px rgba(0,84,166,0.2);">
<i class="fas fa-check-double"></i> TECNOLOGIA LARINSTER 2026
</div>
</div>
</div>
GEMINI
24/02/2026 às 01:08
Larinster
Prompted Vamos focar mais na sala do empreendedor de horizonte e na parceria que ela tem com a prefeitura municipal de horizonte e o sebrae, você sabe sobre a sala do empreendedor nos municípios, pode atualizar:
<div class="comunicado-transicao" style="margin-bottom: 35px; padding: 40px; background: #ffffff; border-radius: 24px; border: 1px solid #e2e8f0; position: relative; overflow: hidden; box-shadow: 0 20px 40px rgba(0,0,0,0.04);">
<div style="position: absolute; top: 0; left: 0; width: 100%; height: 5px; background: linear-gradient(90deg, var(--sebrae-blue), var(--sebrae-yellow));"></div>
<div style="display: flex; align-items: center; gap: 18px; margin-bottom: 25px;">
<div style="background: #f0f7ff; color: var(--sebrae-blue); width: 50px; height: 50px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; border: 1px solid #e0e7ff;">
<i class="fas fa-microchip"></i>
</div>
<div>
<h4 style="color: var(--sebrae-blue); font-weight: 900; margin: 0; text-transform: uppercase; font-size: 1rem; letter-spacing: 1px;">
Evolução Digital Horizonte
</h4>
<p style="margin: 0; font-size: 0.75rem; color: #64748b; font-weight: 700; text-transform: uppercase; letter-spacing: 2px;">Arquitetura de Dados Larinster</p>
</div>
</div>
<div style="font-size: 1.1rem; color: #1e293b; line-height: 1.8; margin-bottom: 25px;">
Prezado Empreendedor, <br>
A Sala do Empreendedor de Horizonte deu um salto tecnológico. Nossa infraestrutura agora é operada sob a
<strong style="color: var(--sebrae-blue); border-bottom: 2px solid var(--sebrae-yellow);">Plataforma Larinster</strong>,
um ecossistema de alta performance desenvolvido para integrar dados, acelerar processos e garantir a segurança jurídica do seu negócio.
</div>
<div style="background: #f8fafc; padding: 25px; border-radius: 16px; border: 1px solid #f1f5f9; position: relative;">
<i class="fas fa-quote-left" style="position: absolute; top: 15px; left: 15px; color: #e2e8f0; font-size: 2rem;"></i>
<p style="font-size: 0.95rem; color: #475569; line-height: 1.7; margin: 0; position: relative; z-index: 1; padding-left: 10px;">
Esta transição marca o compromisso de Horizonte com a <strong>inovação disruptiva</strong>. A tecnologia Larinster foi implementada para elevar a competitividade das empresas locais, oferecendo uma experiência de atendimento digital intuitiva, robusta e focada na longevidade do mercado horizontino.
</p>
</div>
<div style="margin-top: 30px; display: flex; flex-wrap: wrap; gap: 15px; padding-top: 20px; border-top: 1px solid #f1f5f9;">
<div style="display: flex; align-items: center; gap: 8px; background: #ecfdf5; color: #065f46; padding: 6px 12px; border-radius: 8px; font-size: 0.65rem; font-weight: 800; letter-spacing: 0.5px;">
<i class="fas fa-shield-check"></i> AMBIENTE HOMOLOGADO
</div>
<div style="display: flex; align-items: center; gap: 8px; background: #eff6ff; color: #1e40af; padding: 6px 12px; border-radius: 8px; font-size: 0.65rem; font-weight: 800; letter-spacing: 0.5px;">
<i class="fas fa-database"></i> LARINSTER DATA HUB
</div>
<div style="display: flex; align-items: center; gap: 8px; background: #fff7ed; color: #9a3412; padding: 6px 12px; border-radius: 8px; font-size: 0.65rem; font-weight: 800; letter-spacing: 0.5px;">
<i class="fas fa-sync-alt"></i> CICLO 2026 ATIVO
</div>
</div>
</div>
GEMINI
24/02/2026 às 01:08
Larinster
Prompted Pode melhorar, ainda não estou gostando do contexto:
<div class="comunicado-transicao" style="margin-bottom: 35px; padding: 30px; background: #ffffff; border-radius: 20px; border: 1px solid #e2e8f0; border-left: 8px solid var(--sebrae-yellow); box-shadow: 0 10px 25px rgba(0,0,0,0.05);">
<div style="display: flex; align-items: center; gap: 15px; margin-bottom: 20px;">
<div style="background: var(--sebrae-blue); color: #fff; width: 45px; height: 45px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem;">
<i class="fas fa-rocket"></i>
</div>
<div>
<h4 style="color: var(--sebrae-blue); font-weight: 800; margin: 0; text-transform: uppercase; font-size: 0.95rem; letter-spacing: 0.5px;">
Nova Era de Atendimento
</h4>
<p style="margin: 0; font-size: 0.8rem; color: var(--text-light); font-weight: 600;">SALA DO EMPREENDEDOR DE HORIZONTE</p>
</div>
</div>
<p style="font-size: 1.05rem; color: #334155; line-height: 1.8; margin-bottom: 20px;">
Prezado empreendedor(a), para fortalecer nossa missão de estimular o desenvolvimento econômico do Município de Horizonte, informamos que a plataforma anterior foi descontinuada para dar lugar à nova
<strong style="color: var(--sebrae-blue);">Arquitetura Larinster</strong>.
</p>
<div style="background: #f8fafc; padding: 20px; border-radius: 12px; border: 1px dashed #cbd5e1;">
<p style="font-size: 0.95rem; color: #475569; line-height: 1.6; margin: 0;">
<i class="fas fa-code" style="color: var(--sebrae-blue); margin-right: 5px;"></i>
Esta evolução técnica, <strong>desenvolvida pela Larinster</strong>, foi projetada para preparar seu negócio para o futuro, garantindo uma plataforma mais rápida, integrada e focada em elevar a <strong>longevidade, competitividade e inovação</strong> das micro e pequenas empresas horizontinas.
</p>
</div>
<div style="margin-top: 20px; display: flex; gap: 20px; opacity: 0.7;">
<span style="font-size: 0.7rem; font-weight: 700; color: #64748b;"><i class="fas fa-check-circle"></i> PLATAFORMA HOMOLOGADA</span>
<span style="font-size: 0.7rem; font-weight: 700; color: #64748b;"><i class="fas fa-shield-alt"></i> TECNOLOGIA LARINSTER</span>
</div>
</div>
GEMINI
24/02/2026 às 01:08
Larinster
Prompted melhorou, mas pode atualizar o footer por completo, mantendo o mesmo layout e sem alteração nos códigos originais?
<footer>
<div class="container">
<div class="footer-logos">
<img src="https://empreenderhorizonte.com/wp-content/uploads/2025/02/logo-horioznte-2025-1536x390-1-300x76.png" alt="Prefeitura de Horizonte">
<img src="https://empreenderhorizonte.com/wp-content/uploads/2025/02/sebrae-logo-1-1024x554-1-300x162.png" alt="Sebrae">
<img src="https://empreenderhorizonte.com/wp-content/uploads/2025/02/Logo-2.0.2-Sala-Do-Empreendedor-Horizonte-300x160.png"
alt="Sala do Empreendedor"
style="display: block;
max-width: 150px; /* Aumentei de 300px para 450px */
width: 100%;
height: auto;
transition: transform 0.3s ease;
cursor: pointer;"
onmouseover="this.style.transform='scale(1.05)';"
onmouseout="this.style.transform='scale(1)';"
>
</div>
<div class="footer-grid">
<div>
<h4 style="color: var(--sebrae-yellow); margin-bottom: 20px;">Localização</h4>
<p>Centro Administrativo Domingão</p>
<p>Rua Baturité, 770 - Planalto Horizonte</p>
<p>Horizonte - CE, CEP: 62880-000</p>
</div>
<div>
<h4 style="color: var(--sebrae-yellow); margin-bottom: 20px;">Atendimento</h4>
<p>Segunda a Sexta-feira</p>
<p>08:00h às 11:00h | 14:00h às 16:00h</p>
</div>
<div style="display: flex; flex-direction: column; gap: 15px;">
<h4 style="color: var(--sebrae-yellow); margin-bottom: 5px; font-size: 1.1rem; text-transform: uppercase; letter-spacing: 1px;">Siga nossas redes</h4>
<div style="display: flex; gap: 12px; align-items: center;">
<a href="https://instagram.com/empreenderhorizonte" target="_blank" title="Instagram"
style="background: linear-gradient(45deg, #f09433, #dc2743, #bc1888); color: white; width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; text-decoration: none; transition: all 0.3s ease;"
onmouseover="this.style.transform='translateY(-5px)'; this.style.boxShadow='0 5px 15px rgba(188,24,136,0.4)'"
onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='none'">
<i class="fab fa-instagram" style="font-size: 1.4rem;"></i>
</a>
<a href="https://wa.me/5585985662043" target="_blank" title="WhatsApp"
style="background: #25D366; color: white; width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; text-decoration: none; transition: all 0.3s ease;"
onmouseover="this.style.transform='translateY(-5px)'; this.style.boxShadow='0 5px 15px rgba(37,211,102,0.4)'"
onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='none'">
<i class="fab fa-whatsapp" style="font-size: 1.4rem;"></i>
</a>
<a href="https://facebook.com/empreenderhorizonte" target="_blank" title="Facebook"
style="background: #1877F2; color: white; width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; text-decoration: none; transition: all 0.3s ease;"
onmouseover="this.style.transform='translateY(-5px)'; this.style.boxShadow='0 5px 15px rgba(24,119,242,0.4)'"
onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='none'">
<i class="fab fa-facebook-f" style="font-size: 1.3rem;"></i>
</a>
<a href="https://g.co/kgs/zqWh24V" target="_blank" title="Google Meu Negócio"
style="background: white; color: #4285F4; width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; text-decoration: none; transition: all 0.3s ease; border: 1px solid #ddd;"
onmouseover="this.style.transform='translateY(-5px)'; this.style.boxShadow='0 5px 15px rgba(0,0,0,0.1)'"
onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='none'">
<i class="fab fa-google" style="font-size: 1.2rem;"></i>
</a>
</div>
</div>
</div>
<style>
.larinster-tag {
text-align: center;
padding: 25px;
font-family: 'Inter', sans-serif;
font-size: 0.65rem;
letter-spacing: 2px;
color: #94a3b8;
font-weight: 700;
text-transform: uppercase;
}
.lnsr-dot { color: #10b981; margin-right: 5px; animation: blink 2s infinite; }
.lnsr-legal-links { margin-bottom: 10px; display: block; }
.lnsr-legal-links a {
color: #94a3b8;
text-decoration: none;
margin: 0 10px;
transition: color 0.3s;
}
.lnsr-legal-links a:hover { color: var(--sebrae-yellow); }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
</style>
<div class="larinster-tag">
<div class="lnsr-legal-links" style="text-align: center; margin-top: 20px; font-size: 0.75rem;">
<a href="javascript:void(0)" onclick="abrirLegalLarinster('termos')" style="color: var(--text-light); text-decoration: none; font-weight: 600; transition: 0.3s;">Termos de Uso</a>
<span style="opacity: 0.3; margin: 0 8px;">|</span>
<a href="javascript:void(0)" onclick="abrirLegalLarinster('privacidade')" style="color: var(--text-light); text-decoration: none; font-weight: 600; transition: 0.3s;">Privacidade</a>
</div>
<div id="modalLarinster" class="lnsr-modal">
<div class="lnsr-modal-content">
<div class="lnsr-modal-header">
<h3 id="modalTitulo">Documento Legal</h3>
<span class="lnsr-close" onclick="fecharModalLarinster()">×</span>
</div>
<div class="lnsr-modal-body" id="modalTexto">
<div style="text-align:center; padding: 20px;"><i class="fas fa-spinner fa-spin"></i> Carregando...</div>
</div>
<div class="lnsr-modal-footer">
<button onclick="fecharModalLarinster()" class="btn-entendido">COMPREENDI</button>
</div>
</div>
</div>
<style>
.lnsr-modal {
display: none;
position: fixed;
z-index: 9999;
left: 0; top: 0;
width: 100%; height: 100%;
background-color: rgba(15, 23, 42, 0.8); /* Overlay escuro padrão Larinster */
backdrop-filter: blur(5px);
}
.lnsr-modal-content {
background-color: #fff;
margin: 5% auto;
padding: 0;
border-radius: 20px;
width: 90%;
max-width: 600px;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
overflow: hidden;
animation: slideIn 0.3s ease-out;
}
@keyframes slideIn {
from { transform: translateY(-30px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
.lnsr-modal-header {
padding: 20px 25px;
background: #f8fafc;
border-bottom: 1px solid #e2e8f0;
display: flex;
justify-content: space-between;
align-items: center;
}
.lnsr-modal-header h3 {
margin: 0; color: var(--sebrae-blue); font-size: 1.1rem; text-transform: uppercase; letter-spacing: 1px;
}
.lnsr-close {
font-size: 28px; font-weight: bold; color: #94a3b8; cursor: pointer; transition: 0.3s;
}
.lnsr-close:hover { color: #ef4444; }
.lnsr-modal-body {
padding: 25px;
max-height: 400px;
overflow-y: auto;
font-size: 0.95rem;
color: #475569;
line-height: 1.6;
}
.lnsr-modal-footer {
padding: 15px 25px;
background: #f8fafc;
text-align: right;
border-top: 1px solid #e2e8f0;
}
.btn-entendido {
background: var(--sebrae-blue);
color: white;
border: none;
padding: 10px 25px;
border-radius: 8px;
font-weight: 700;
cursor: pointer;
}
.lnsr-legal-links a:hover { color: var(--sebrae-blue) !important; text-decoration: underline !important; }
</style>
<script>
function abrirLegalLarinster(tipo) {
const modal = document.getElementById('modalLarinster');
const titulo = document.getElementById('modalTitulo');
const corpo = document.getElementById('modalTexto');
// Define o título conforme o padrão Larinster
titulo.innerText = (tipo === 'termos') ? 'Termos de Uso - Plataforma Larinster' : 'Política de Privacidade e LGPD';
// Captura o conteúdo que já foi carregado pelo PHP acima
const conteudo = document.getElementById('lnsr-data-' + tipo).innerHTML;
// Alimenta o modal instantaneamente (sem delay de rede)
corpo.innerHTML = conteudo;
// Exibe o modal
modal.style.display = "block";
}
function fecharModalLarinster() {
document.getElementById('modalLarinster').style.display = "none";
}
// Fecha ao clicar fora do modal
window.onclick = function(event) {
const modal = document.getElementById('modalLarinster');
if (event.target == modal) fecharModalLarinster();
}
</script>
<div style="margin-bottom: 10px;">
© 2026 <strong>Sala do Empreendedor de Horizonte</strong> | Todos os direitos reservados
</div>
<div>
<i class="fas fa-circle lnsr-dot"></i>
Arquitetura de Dados e Conectividade: <strong>Tecnologia Larinster</strong>
</div>
</div>
</div>
</footer>
GEMINI
24/02/2026 às 01:08
Larinster
Prompted Pode atualizar o trecho completo:
<div class="larinster-tag">
<div class="lnsr-legal-links" style="text-align: center; margin-top: 20px; font-size: 0.75rem;">
<a href="javascript:void(0)" onclick="abrirLegalLarinster('termos')" style="color: var(--text-light); text-decoration: none; font-weight: 600; transition: 0.3s;">Termos de Uso</a>
<span style="opacity: 0.3; margin: 0 8px;">|</span>
<a href="javascript:void(0)" onclick="abrirLegalLarinster('privacidade')" style="color: var(--text-light); text-decoration: none; font-weight: 600; transition: 0.3s;">Privacidade</a>
</div>
<div id="modalLarinster" class="lnsr-modal">
<div class="lnsr-modal-content">
<div class="lnsr-modal-header">
<h3 id="modalTitulo">Documento Legal</h3>
<span class="lnsr-close" onclick="fecharModalLarinster()">×</span>
</div>
<div class="lnsr-modal-body" id="modalTexto">
<div style="text-align:center; padding: 20px;"><i class="fas fa-spinner fa-spin"></i> Carregando...</div>
</div>
<div class="lnsr-modal-footer">
<button onclick="fecharModalLarinster()" class="btn-entendido">COMPREENDI</button>
</div>
</div>
</div>
<style>
.lnsr-modal {
display: none;
position: fixed;
z-index: 9999;
left: 0; top: 0;
width: 100%; height: 100%;
background-color: rgba(15, 23, 42, 0.8); /* Overlay escuro padrão Larinster */
backdrop-filter: blur(5px);
}
.lnsr-modal-content {
background-color: #fff;
margin: 5% auto;
padding: 0;
border-radius: 20px;
width: 90%;
max-width: 600px;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
overflow: hidden;
animation: slideIn 0.3s ease-out;
}
@keyframes slideIn {
from { transform: translateY(-30px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
.lnsr-modal-header {
padding: 20px 25px;
background: #f8fafc;
border-bottom: 1px solid #e2e8f0;
display: flex;
justify-content: space-between;
align-items: center;
}
.lnsr-modal-header h3 {
margin: 0; color: var(--sebrae-blue); font-size: 1.1rem; text-transform: uppercase; letter-spacing: 1px;
}
.lnsr-close {
font-size: 28px; font-weight: bold; color: #94a3b8; cursor: pointer; transition: 0.3s;
}
.lnsr-close:hover { color: #ef4444; }
.lnsr-modal-body {
padding: 25px;
max-height: 400px;
overflow-y: auto;
font-size: 0.95rem;
color: #475569;
line-height: 1.6;
}
.lnsr-modal-footer {
padding: 15px 25px;
background: #f8fafc;
text-align: right;
border-top: 1px solid #e2e8f0;
}
.btn-entendido {
background: var(--sebrae-blue);
color: white;
border: none;
padding: 10px 25px;
border-radius: 8px;
font-weight: 700;
cursor: pointer;
}
.lnsr-legal-links a:hover { color: var(--sebrae-blue) !important; text-decoration: underline !important; }
</style>
<script>
function abrirLegalLarinster(tipo) {
const modal = document.getElementById('modalLarinster');
const titulo = document.getElementById('modalTitulo');
const corpo = document.getElementById('modalTexto');
// Define o título conforme o padrão Larinster
titulo.innerText = (tipo === 'termos') ? 'Termos de Uso - Plataforma Larinster' : 'Política de Privacidade e LGPD';
// Captura o conteúdo que já foi carregado pelo PHP acima
const conteudo = document.getElementById('lnsr-data-' + tipo).innerHTML;
// Alimenta o modal instantaneamente (sem delay de rede)
corpo.innerHTML = conteudo;
// Exibe o modal
modal.style.display = "block";
}
function fecharModalLarinster() {
document.getElementById('modalLarinster').style.display = "none";
}
// Fecha ao clicar fora do modal
window.onclick = function(event) {
const modal = document.getElementById('modalLarinster');
if (event.target == modal) fecharModalLarinster();
}
</script>
GEMINI
24/02/2026 às 01:08
Larinster
Prompted A pasta includes não pode ser acessado manualmente, esta subpasta é pra ser somente para includes e coloquei os termos lá dentro, para facilitar a puxar os dados da pasta raiz onde o arquivo footer está, pode atualizar:
<script>
function abrirLegalLarinster(tipo) {
const modal = document.getElementById('modalLarinster');
const titulo = document.getElementById('modalTitulo');
const corpo = document.getElementById('modalTexto');
// Títulos padrão Larinster
titulo.innerText = (tipo === 'termos') ? 'Termos de Uso - Plataforma Larinster' : 'Política de Privacidade e LGPD';
// Mostra o modal com feedback de carregamento
modal.style.display = "block";
corpo.innerHTML = '<div style="text-align:center; padding: 20px;"><i class="fas fa-spinner fa-spin"></i> Acessando Servidor Larinster...</div>';
/**
* AJUSTE PARA PASTA INCLUDES:
* O JS tentará buscar na pasta 'includes/' a partir da raiz.
* Se você estiver em uma subpasta (Estrutura/), ele tentará '../includes/'.
*/
const pastaAlvo = 'includes/';
$.get(pastaAlvo + tipo + '.php', function(data) {
corpo.innerHTML = data;
}).fail(function() {
// Segunda tentativa para páginas dentro de pastas (ex: /Estrutura/default.php)
$.get('../' + pastaAlvo + tipo + '.php', function(data) {
corpo.innerHTML = data;
}).fail(function() {
corpo.innerHTML = "<div style='text-align:center; color:red; padding:20px; font-weight:600;'>" +
"<i class='fas fa-exclamation-triangle'></i> Erro ao localizar o documento.<br>" +
"<small style='color:#666'>Verifique se " + tipo + ".php está na pasta /includes/</small></div>";
});
});
}
function fecharModalLarinster() {
document.getElementById('modalLarinster').style.display = "none";
}
// Fechar se clicar fora do conteúdo branco do modal
window.onclick = function(event) {
const modal = document.getElementById('modalLarinster');
if (event.target == modal) fecharModalLarinster();
}
</script>
GEMINI
24/02/2026 às 01:08
Larinster
Prompted Ele só aparece "carregando documento larinster"
GEMINI
24/02/2026 às 01:08
Larinster
Prompted Para melhorar, vou incluir os termos dentro da subpasta include onde está o footer.php, tem como atualizar:
<script>
function abrirLegalLarinster(tipo) {
const modal = document.getElementById('modalLarinster');
const titulo = document.getElementById('modalTitulo');
const corpo = document.getElementById('modalTexto');
// Títulos padrão Larinster
titulo.innerText = (tipo === 'termos') ? 'Termos de Uso - Plataforma Larinster' : 'Política de Privacidade e LGPD';
// Mostra o modal
modal.style.display = "block";
corpo.innerHTML = '<div style="text-align:center; padding: 20px;"><i class="fas fa-spinner fa-spin"></i> Carregando Documentação...</div>';
/**
* AJUSTE DE CAMINHO:
* Se o site estiver na raiz, usamos 'Termos/'.
* Se você estiver dentro de uma pasta como 'Estrutura/', o JS tentará buscar em 'Estrutura/Termos/'.
* Para garantir, usamos o prefixo '/' para buscar da raiz ou '../Termos/' se for o caso.
*/
const caminhoBase = 'Termos/'; // Se as páginas principais (default.php) estiverem na raiz
$.get(caminhoBase + tipo + '.php', function(data) {
corpo.innerHTML = data;
}).fail(function() {
// Tentativa secundária caso a página esteja em uma subpasta (como /Estrutura/ ou /Contato/)
$.get('../' + caminhoBase + tipo + '.php', function(data) {
corpo.innerHTML = data;
}).fail(function() {
corpo.innerHTML = "<div style='text-align:center; color:red;'>Erro ao carregar o documento legal.<br>Verifique a pasta /Termos/ na raiz do servidor.</div>";
});
});
}
function fecharModalLarinster() {
document.getElementById('modalLarinster').style.display = "none";
}
// Fechar se clicar fora do modal
window.onclick = function(event) {
const modal = document.getElementById('modalLarinster');
if (event.target == modal) fecharModalLarinster();
}
</script>
GEMINI
24/02/2026 às 01:08
Larinster
Prompted os arquivos estão na subpasta Termos e o código:
<script>
function abrirLegalLarinster(tipo) {
const modal = document.getElementById('modalLarinster');
const titulo = document.getElementById('modalTitulo');
const corpo = document.getElementById('modalTexto');
// Define o título baseado na escolha
titulo.innerText = (tipo === 'termos') ? 'Termos de Uso - Plataforma Larinster' : 'Política de Privacidade e LGPD';
modal.style.display = "block";
// Carrega o conteúdo do arquivo via AJAX
$.get(tipo + '.php', function(data) {
corpo.innerHTML = data;
}).fail(function() {
corpo.innerHTML = "Erro ao carregar o documento. Por favor, tente novamente.";
});
}
function fecharModalLarinster() {
document.getElementById('modalLarinster').style.display = "none";
}
// Fechar se clicar fora do modal
window.onclick = function(event) {
const modal = document.getElementById('modalLarinster');
if (event.target == modal) fecharModalLarinster();
}
</script>
:::
Está na subpasta includes, pois ele fica dentro do arquivo footer.php, tem como atualizar?
GEMINI
24/02/2026 às 01:08
Larinster
Prompted Eu coloquei na pasta chamado Termos:
<script>
function abrirLegalLarinster(tipo) {
const modal = document.getElementById('modalLarinster');
const titulo = document.getElementById('modalTitulo');
const corpo = document.getElementById('modalTexto');
// Define o título baseado na escolha
titulo.innerText = (tipo === 'termos') ? 'Termos de Uso - Plataforma Larinster' : 'Política de Privacidade e LGPD';
modal.style.display = "block";
// Carrega o conteúdo do arquivo via AJAX
$.get(tipo + '.php', function(data) {
corpo.innerHTML = data;
}).fail(function() {
corpo.innerHTML = "Erro ao carregar o documento. Por favor, tente novamente.";
});
}
function fecharModalLarinster() {
document.getElementById('modalLarinster').style.display = "none";
}
// Fechar se clicar fora do modal
window.onclick = function(event) {
const modal = document.getElementById('modalLarinster');
if (event.target == modal) fecharModalLarinster();
}
</script>
GEMINI
24/02/2026 às 01:08
Larinster
Prompted Nesse trecho temos dois arquivos chamados termos.php e privacidade.php, não vou precisar que abra uma página sobre esses dois, mas preciso que seja mostrado na tela assim que clicar em um deles o termo ou a privacidade, seguindo todo o desenvolvimento da Larinster, preciso que crie algo sobre esses dois:
<div class="lnsr-legal-links">
<a href="termos.php">Termos de Uso</a>
<span style="opacity: 0.3;">|</span>
<a href="privacidade.php">Privacidade</a>
</div>
GEMINI
24/02/2026 às 01:08
Larinster
Prompted Pode atualizar a frase um pouco:?
<div style="background: var(--sebrae-blue); color: white; padding: 15px; text-align: center; font-size: 0.8rem; font-weight: 600;">
<i class="fas fa-shield-alt" style="color: var(--sebrae-yellow); margin-right: 5px;"></i>
A segurança e transparência dos seus dados são garantidas pelo Protocolo Larinster.
</div>
GEMINI
24/02/2026 às 01:08
Larinster
Prompted Pode atualizar:
<div style="background: var(--sebrae-blue); color: white; padding: 15px; text-align: center; font-size: 0.8rem; font-weight: 600;">
<i class="fas fa-shield-alt" style="color: var(--sebrae-yellow); margin-right: 5px;"></i>
A segurança e transparência dos seus dados são garantidas pelo Protocolo Larinster.
</div>
GEMINI
24/02/2026 às 01:08
Larinster
Prompted Pode atualizar:
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-bottom: 40px; background: var(--horizonte-light); padding: 25px; border-radius: 15px;">
<div style="text-align: center;">
<span style="display: block; font-size: 0.7rem; font-weight: 800; color: var(--sebrae-blue); text-transform: uppercase;">Status da Migração</span>
<span style="font-weight: 700; color: #059669;"><i class="fas fa-check-circle"></i> Em Andamento</span>
</div>
<div style="text-align: center; border-left: 1px solid rgba(0,0,0,0.05); border-right: 1px solid rgba(0,0,0,0.05);">
<span style="display: block; font-size: 0.7rem; font-weight: 800; color: var(--sebrae-blue); text-transform: uppercase;">Previsão de Conclusão</span>
<span style="font-weight: 700;">Ciclo 2026</span>
</div>
<div style="text-align: center;">
<span style="display: block; font-size: 0.7rem; font-weight: 800; color: var(--sebrae-blue); text-transform: uppercase;">Tecnologia</span>
<span style="font-weight: 700; color: var(--sebrae-blue);"><i class="fab fa-whatsapp"></i> Larinster</span>
</div>
</div>
GEMINI
24/02/2026 às 01:08
Larinster
Prompted No lugar de sistema, pode ser plataforma mesmo e informar que o sistema é desenvolvido pela Larinster:
<div class="comunicado-transicao" style="margin-bottom: 35px; padding: 30px; background: #ffffff; border-radius: 20px; border: 1px solid #e2e8f0; border-left: 8px solid var(--sebrae-yellow); box-shadow: 0 10px 25px rgba(0,0,0,0.05);">
<div style="display: flex; align-items: center; gap: 15px; margin-bottom: 20px;">
<div style="background: var(--sebrae-blue); color: #fff; width: 45px; height: 45px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem;">
<i class="fas fa-rocket"></i>
</div>
<div>
<h4 style="color: var(--sebrae-blue); font-weight: 800; margin: 0; text-transform: uppercase; font-size: 0.95rem; letter-spacing: 0.5px;">
Nova Era de Atendimento
</h4>
<p style="margin: 0; font-size: 0.8rem; color: var(--text-light); font-weight: 600;">SALA DO EMPREENDEDOR DE HORIZONTE</p>
</div>
</div>
<p style="font-size: 1.05rem; color: #334155; line-height: 1.8; margin-bottom: 20px;">
Prezado empreendedor, para fortalecer nossa missão de estimular o desenvolvimento econômico de Horizonte, informamos que o sistema anterior foi descontinuado para dar lugar à nova
<strong style="color: var(--sebrae-blue);">Arquitetura Larinster 2026</strong>.
</p>
<div style="background: #f8fafc; padding: 20px; border-radius: 12px; border: 1px dashed #cbd5e1;">
<p style="font-size: 0.95rem; color: #475569; line-height: 1.6; margin: 0;">
<i class="fas fa-info-circle" style="color: var(--sebrae-blue);"></i>
Esta evolução técnica foi projetada para preparar seu negócio para o futuro, garantindo uma plataforma mais rápida, integrada e focada em elevar a <strong>longevidade, competitividade e inovação</strong> das micro e pequenas empresas horizontinas.
</p>
</div>
<div style="margin-top: 20px; display: flex; gap: 20px; opacity: 0.7;">
<span style="font-size: 0.7rem; font-weight: 700; color: #64748b;"><i class="fas fa-check-circle"></i> SISTEMA HOMOLOGADO</span>
<span style="font-size: 0.7rem; font-weight: 700; color: #64748b;"><i class="fas fa-shield-alt"></i> PADRÃO LARINSTER 2026</span>
</div>
</div>
GEMINI
24/02/2026 às 01:08
Larinster
Prompted Pode melhorar este texto:
<div class="comunicado-transicao" style="margin-bottom: 30px; padding: 25px; background: #f1f5f9; border-radius: 15px; border-left: 6px solid var(--sebrae-yellow);">
<h4 style="color: var(--sebrae-blue); font-weight: 800; margin-bottom: 10px; text-transform: uppercase; font-size: 0.9rem; letter-spacing: 1px;">
<i class="fas fa-sync-alt"></i> Evolução do Sistema
</h4>
<p style="font-size: 1.05rem; color: #334155; line-height: 1.7; margin: 0;">
Prezado empreendedor de Horizonte, informamos que o sistema antigo foi descontinuado para dar lugar à nova
<strong style="color: var(--sebrae-blue);">Arquitetura desenvolvida pela Larinster</strong>.
Estamos trabalhando para entregar uma plataforma mais rápida, totalmente integrada e
estritamente focada no desenvolvimento e aceleração do seu negócio.
</p>
</div>
::::
Este é um exemplo do que temos sobre a sala:
A sala do empreendedor é uma iniciativa da Prefeitura Municipal de Horizonte com o apoio do Sebrae que tem por objetivo de estimular o empreendedorismo, promover o desenvolvimento econômico do município e preparar os empreendedores para a formalização e elevar a longevidade, a competitividade e a inovação dos pequenos negócios.
GEMINI
24/02/2026 às 01:08
Larinster
Prompted Pode mudar este trecho:
<p style="font-size: 1.1rem; color: var(--text-light); margin-bottom: 30px; line-height: 1.8;">
Prezado empreendedor de Horizonte, o sistema antigo foi descontinuado para dar lugar à nova
<strong>Arquitetura de Dados Larinster 2026</strong>. Estamos trabalhando para trazer uma plataforma
mais rápida, integrada e focada no desenvolvimento do seu negócio.
</p>
:::
Preciso que os empreendedores que acessar o site da Sala do Empreendedor de Horizonte que o sistema antigo foi descontinuado para dar lugar à nova Arquitetura desenvolvida pela Larinster e que Estamos trabalhando para trazer uma plataforma mais rápida, integrada e focada no desenvolvimento do seu negócio.
GEMINI
24/02/2026 às 01:08
Larinster
Prompted Preciso que essa parte funcione das seleções automaticas:
<?php
// Lógica Larinster para detectar a página atual
$pagina_atual = basename($_SERVER['PHP_SELF']);
?>
<nav class="nav-larinster">
<div class="container">
<ul class="nav-container">
<li>
<a href="../" class="<?= ($pagina_atual == '../') ? 'active' : '' ?>">
<i class="fas fa-home"></i> Inicio
</a>
</li>
<li>
<a href="../Estrutura/" class="<?= ($pagina_atual == '../Estrutura/') ? 'active' : '' ?>">
<i class="fas fa-building"></i> Estrutura
</a>
</li>
<li>
<a href="../Contato/" class="<?= ($pagina_atual == '../Contato/') ? 'active' : '' ?>">
<i class="fas fa-envelope"></i> Contato
</a>
</li>
</ul>
</div>
</nav>
<style>
/* Estilos do Menu */
.nav-larinster {
background: #f8fafc;
border-bottom: 1px solid #e2e8f0;
padding: 0;
position: sticky;
top: 125px;
z-index: 999;
}
.nav-container {
display: flex;
justify-content: center;
list-style: none;
gap: 40px;
}
.nav-container a {
text-decoration: none;
color: var(--sebrae-blue);
font-family: 'Montserrat', sans-serif;
font-weight: 700;
font-size: 0.85rem;
text-transform: uppercase;
padding: 15px 0;
display: block;
letter-spacing: 1px;
transition: 0.3s;
border-bottom: 3px solid transparent;
}
/* Classe de Link Ativo */
.nav-container a:hover,
.nav-container a.active {
color: var(--horizonte-blue);
border-bottom: 3px solid var(--sebrae-yellow);
}
/* Responsividade */
@media (max-width: 768px) {
.nav-larinster { top: 0; position: relative; }
.nav-container { gap: 10px; flex-wrap: wrap; justify-content: center; }
.nav-container a { font-size: 0.75rem; padding: 10px 5px; }
}
</style>
GEMINI
24/02/2026 às 01:08
Larinster
Prompted Este é o script:
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.16/jquery.mask.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.16/jquery.mask.min.js"></script>
<script>
$(document).ready(function(){
// --- 1. MÁSCARAS PADRÃO LARINSTER ---
// Unificando seletores para garantir que tanto o campo de busca quanto o de cadastro funcionem
$('#cpf, input[name="cpf"]').mask('000.000.000-00');
$('.mask-cep, #cep').mask('00000-000');
$('.mask-tel, #telefone').mask('(00) 0 0000-0000');
$('.mask-cnpj, #cnpj_pj').mask('00.000.000/0000-00');
// --- 2. LÓGICA DE TRIAGEM (FORM 01) ---
$('#assunto_select').change(function(){
const selectedOption = $(this).find('option:selected');
const tipo = selectedOption.data('tipo');
const valor = $(this).val();
$('#bloco_orientacao, #bloco_mensagem').hide();
$('#mensagem_input').prop('required', false);
if (tipo === 'orientacao') {
let guia = "";
if(valor === 'ORI_MEI') guia = "<strong>Passo a Passo MEI:</strong> Para abrir seu CNPJ você precisará da conta GOV.BR nível Prata/Ouro e documentos pessoais.";
if(valor === 'ORI_BOLETO') guia = "<strong>Boleto DAS:</strong> O vencimento é todo dia 20. Utilize o App MEI oficial para emitir seu guia.";
if(valor === 'ORI_NOTAFISCAL') guia = "<strong>Nota Fiscal:</strong> O MEI deve emitir a Nota Fiscal de Serviço Nacional pelo portal gov.br/nfse.";
$('#texto_orientacao').html(guia);
$('#bloco_orientacao').fadeIn();
$('#btn_submit').text('LI E COMPREENDI').css('background', '#2ecc71');
} else if (tipo === 'servico') {
$('#bloco_mensagem').fadeIn();
$('#mensagem_input').prop('required', true);
$('#btn_submit').text('GERAR PROTOCOLO DIGITAL').css('background', 'var(--sebrae-blue)');
if(valor.includes('MEI') || valor.includes('DECLARACAO')) {
$('#texto_orientacao').html("<strong>IMPORTANTE:</strong> Este serviço exige senha <strong>GOV.BR Prata ou Ouro</strong>.");
$('#bloco_orientacao').fadeIn();
}
}
});
// --- 3. VERIFICAÇÃO DE CPF (PONTE ENTRE FORMULÁRIOS) ---
$('#cpf').blur(function(){
let cpfOriginal = $(this).val();
let cpfLimpo = cpfOriginal.replace(/\D/g, '');
if(cpfLimpo.length === 11){
$('#loading_cpf').show();
$.getJSON('verificar_cliente.php', { cpf: cpfOriginal }, function(data) {
$('#loading_cpf').hide();
if(data.status === 'encontrado'){
// CLIENTE ACHADO: Abre campos de triagem (Assunto/Mensagem)
$('#nome_usuario').val(data.nome);
$('#campos_extensao').slideDown();
$('#cpf').css('border-color', '#10b981');
} else if (data.status === 'invalido') {
alert("Este CPF não é válido. Verifique os números.");
$('#cpf').val('').focus().css('border-color', 'red');
} else {
// NÃO CADASTRADO: Esconde triagem e abre formulário de cadastro completo
$('#container_triagem').hide();
$('#container_cadastro').fadeIn();
// Preenche o CPF automaticamente no formulário de cadastro
$('input[name="cpf"]').val(cpfOriginal);
// Foca no próximo campo (geralmente Nome)
$('input[name="nome_completo"]').focus();
}
});
}
});
// --- 4. LOGICA DE CADASTRO (FORM 02) ---
// Busca de CEP Automática (ViaCEP)
$('#cep').blur(function() {
let cep = $(this).val().replace(/\D/g, '');
if (cep.length === 8) {
$.getJSON("https://viacep.com.br/ws/"+ cep +"/json/", function(dados) {
if (!("erro" in dados)) {
$("#logradouro").val(dados.logradouro.toUpperCase());
$("#bairro").val(dados.bairro.toUpperCase());
$("#cidade").val(dados.localidade.toUpperCase());
$("#estado").val(dados.uf.toUpperCase());
$("#numero").focus();
}
});
}
});
// Toggle CNPJ
$('#tem_cnpj').change(function(){
if($(this).val() === 'SIM') $('#div-cnpj').slideDown();
else $('#div-cnpj').slideUp();
});
// Busca de CNPJ (BrasilAPI)
$('#cnpj_pj').blur(function(){
let cnpj = $(this).val().replace(/\D/g, '');
if(cnpj.length === 14) {
$('#razao_social').val('Consultando Receita Federal...');
$('#div-empresa').fadeIn();
$.getJSON("https://brasilapi.com.br/api/cnpj/v1/" + cnpj, function(data) {
$('#razao_social').val(data.razao_social.toUpperCase());
$('#nome_fantasia').val(data.nome_fantasia ? data.nome_fantasia.toUpperCase() : data.razao_social.toUpperCase());
$('#view_situacao').val(data.descricao_situacao_cadastral.toUpperCase());
let dataBr = data.data_inicio_atividade.split('-').reverse().join('/');
$('#view_abertura').val(dataBr);
$('#view_atividade').val(data.cnae_fiscal_descricao.toUpperCase());
// Hidden Fields para o Banco lnsr_cnpjs
$('#h_data_abertura').val(data.data_inicio_atividade);
$('#h_atividade_principal').val(data.cnae_fiscal_descricao.toUpperCase());
$('#h_logradouro_pj').val(data.logradouro.toUpperCase());
$('#h_numero_pj').val(data.numero);
$('#h_complemento_pj').val(data.complemento ? data.complemento.toUpperCase() : "");
$('#h_cep_pj').val(data.cep);
$('#h_bairro_pj').val(data.bairro.toUpperCase());
$('#h_municipio_pj').val(data.municipio.toUpperCase());
$('#h_uf_pj').val(data.uf);
$('#h_email_pj').val(data.email ? data.email.toLowerCase() : "");
$('#h_telefone_pj').val(data.ddd_telefone_1);
$('#h_situacao_cadastral').val(data.descricao_situacao_cadastral.toUpperCase());
$('#h_data_situacao_cadastral').val(data.data_situacao_cadastral);
}).fail(function() {
alert("Não conseguimos localizar o CNPJ automaticamente.");
$('#razao_social').val('').focus();
});
}
});
// --- 5. ENVIO AJAX (UNIFICADO COM FLAG DE CADASTRO) ---
$('#formID, #formAdd').submit(function(e) {
e.preventDefault();
const form = $(this);
const btn = form.find('button[type="submit"]');
const originalText = btn.html();
// Identifica se é o formulário de cadastro para enviar a flag correta ao PHP
let formData = form.serialize();
if(form.attr('id') === 'formAdd') {
formData += '&novo_cliente=1';
}
btn.prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i> PROCESSANDO...');
$.ajax({
url: 'clientes.php',
type: 'POST',
data: formData,
dataType: 'json',
success: function(response) {
if (response.status === 'success') {
alert("✅ " + response.msg + "\nPROTOCOLO: " + response.protocolo);
window.location.reload();
} else {
alert("❌ Erro: " + response.msg);
btn.prop('disabled', false).html(originalText);
}
},
error: function(xhr) {
console.error(xhr.responseText);
alert("Erro na comunicação com o servidor. Verifique o console.");
btn.prop('disabled', false).html(originalText);
}
});
});
});
// --- 6. SISTEMA DE ESTATÍSTICAS (OPCIONAL) ---
function animarNumerosLarinster() {
const stats = [
{ id: 'lnsr_total_atendimentos', final: 12500 },
{ id: 'lnsr_mei_ativos', final: 4800 },
{ id: 'lnsr_capacitacoes', final: 120 },
{ id: 'lnsr_satisfacao', final: 98, sufixo: '%' }
];
stats.forEach(stat => {
const elemento = document.getElementById(stat.id);
if (!elemento) return;
let inicio = 0;
const duracao = 2000;
const incremento = stat.final / (duracao / 16);
const atualizar = () => {
inicio += incremento;
if (inicio < stat.final) {
elemento.innerText = Math.floor(inicio).toLocaleString('pt-BR') + (stat.sufixo || '');
requestAnimationFrame(atualizar);
} else {
elemento.innerText = stat.final.toLocaleString('pt-BR') + (stat.sufixo || '');
}
};
atualizar();
});
}
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
animarNumerosLarinster();
observer.unobserve(entry.target);
}
});
}, { threshold: 0.5 });
document.querySelectorAll('.stats-container').forEach(section => observer.observe(section));
</script>
GEMINI
24/02/2026 às 01:08
Larinster
Prompted Pode fazer um novo ajuste:
<section class="hero">
<div class="container">
<span class="badge-ouro">IDENTIFICAÇÃO DIGITAL</span>
<h1>Atendimento Unificado</h1>
<p class="frase-inspira">Conectando seu negócio ao futuro de Horizonte.</p>
</div>
</section>
<main class="container">
<div class="contact-card-wrapper">
<style>
/* Reset e Estrutura do Wrapper */
.contact-card-wrapper { max-width: 900px; margin: 0 auto; padding: 40px 20px; }
/* Estilo do Cartão (O que estava faltando) */
.contact-card {
background: #fff;
padding: 40px;
border-radius: 20px;
box-shadow: 0 15px 35px rgba(0,0,0,0.1);
border-top: 5px solid var(--sebrae-blue);
text-align: center;
}
/* Inputs padrão Larinster */
.lnsr-input {
width: 100%;
padding: 15px;
border: 2px solid #e2e8f0;
border-radius: 12px;
margin-bottom: 20px;
font-family: 'Open Sans', sans-serif;
transition: 0.3s;
font-size: 1rem;
}
.lnsr-input:focus { border-color: var(--sebrae-blue); outline: none; background: #fff; }
/* Botão Submit */
.btn-submit {
width: 100%;
padding: 20px;
background: var(--sebrae-blue);
color: white;
border: none;
border-radius: 12px;
font-weight: 800;
font-family: 'Montserrat';
text-transform: uppercase;
cursor: pointer;
transition: 0.3s;
letter-spacing: 1px;
}
.btn-submit:hover { background: var(--horizonte-blue); transform: translateY(-2px); }
/* Fieldsets do Cadastro */
.lnsr-fieldset {
border: 2px solid #e2e8f0;
border-radius: 15px;
padding: 25px;
margin-bottom: 25px;
background: #f8fafc;
text-align: left;
}
.lnsr-legend {
padding: 0 15px;
font-weight: 800;
color: var(--sebrae-blue);
font-size: 0.8rem;
text-transform: uppercase;
background: #f8fafc;
border-radius: 5px;
}
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 15px; }
.form-control {
width: 100%;
padding: 12px;
border-radius: 10px;
border: 1px solid #cbd5e1;
margin-top: 5px;
margin-bottom: 10px;
}
label {
font-size: 0.7rem;
font-weight: 700;
color: var(--text-light);
text-transform: uppercase;
display: block;
margin-left: 5px;
}
@media (max-width: 600px) {
.grid-2 { grid-template-columns: 1fr; }
.contact-card { padding: 25px; }
}
</style>
<div id="container_triagem">
<form id="formID" autocomplete="off" class="contact-card">
<div style="text-align: center; margin-bottom: 30px;">
<h3 style="color: var(--sebrae-blue); font-weight: 800;">VALIDAÇÃO DE ACESSO</h3>
<p style="font-size: 0.85rem; color: var(--text-light);">Informe seu CPF para iniciar o atendimento.</p>
</div>
<input type="text" name="cpf" id="cpf" placeholder="000.000.000-00" class="lnsr-input mask-cpf" style="font-size: 1.4rem; text-align: center; font-weight: 800;" required>
<div id="loading_cpf" style="display:none; text-align: center; margin-bottom: 10px;">
<i class="fas fa-circle-notch fa-spin"></i> Sincronizando...
</div>
<div id="campos_extensao" style="display:none;">
<label>Nome Completo</label>
<input type="text" name="nome_completo" id="nome_usuario" class="lnsr-input" readonly style="background: #f1f5f9;">
<label>O que você busca hoje?</label>
<select name="assunto" id="assunto_select" class="lnsr-input" required>
<option value="">Selecione uma opção...</option>
<optgroup label="💡 ORIENTAÇÕES (Informativo)">
<option value="ORI_MEI" data-tipo="orientacao">Quero saber como ser MEI</option>
<option value="ORI_BOLETO" data-tipo="orientacao">Como emitir meu boleto DAS</option>
<option value="ORI_NOTAFISCAL" data-tipo="orientacao">Como emitir Nota Fiscal</option>
</optgroup>
<optgroup label="⚙️ SERVIÇOS DIGITAIS (Solicitação)">
<option value="FORMALIZACAO MEI" data-tipo="servico">Formalização MEI (Abertura)</option>
<option value="DECLARACAO ANUAL DASN" data-tipo="servico">Fazer Declaração Anual</option>
<option value="ALTERACAO_BAIXA" data-tipo="servico">Alteração ou Baixa de CNPJ</option>
<option value="OUTROS" data-tipo="servico">Outros Assuntos</option>
</optgroup>
</select>
<div id="bloco_orientacao" style="display:none; background: #e6f0ff; border-left: 5px solid var(--sebrae-blue); padding: 20px; border-radius: 8px; margin-bottom: 20px; text-align: left;">
<div id="texto_orientacao" style="font-size: 0.9rem; color: #003399; line-height: 1.5;"></div>
<p style="margin-top:15px; font-size: 0.75rem; font-weight: 700; color: var(--sebrae-blue);">
<i class="fas fa-info-circle"></i> Ao clicar abaixo, um protocolo de orientação será registrado.
</p>
</div>
<div id="bloco_mensagem" style="display:none; text-align: left;">
<label>Detalhes da Solicitação</label>
<textarea name="mensagem" id="mensagem_input" class="lnsr-input" rows="3" placeholder="Como podemos te ajudar?"></textarea>
</div>
<button type="submit" id="btn_submit" class="btn-submit">Gerar Protocolo</button>
</div>
</form>
</div>
<div id="container_cadastro" style="display: none;">
<form id="formAdd" autocomplete="off" class="contact-card">
<input type="hidden" name="novo_cliente" value="1">
<div style="text-align: center; margin-bottom: 35px;">
<div style="background: #FFF9E6; color: #D97706; padding: 15px; border-radius: 12px; margin-bottom: 20px; font-weight: 700; font-size: 0.9rem; border: 1px solid #FFE6A5;">
<i class="fas fa-user-plus"></i> CPF não encontrado. Complete seu cadastro para continuar.
</div>
<h2 style="color: var(--sebrae-blue); font-weight: 900; text-transform: uppercase;">Cadastro de Usuário</h2>
</div>
<fieldset class="lnsr-fieldset">
<legend class="lnsr-legend">Dados Pessoais</legend>
<label>Nome Completo</label>
<input type="text" name="nome_completo" required class="form-control" style="text-transform: uppercase;">
<div class="grid-2">
<div><label>RG</label><input type="text" name="rg" class="form-control" style="text-transform: uppercase;"></div>
<div><label>Data de Nascimento</label><input type="date" name="data_nascimento" class="form-control"></div>
</div>
<div class="grid-2">
<div><label>Nome da Mãe</label><input type="text" name="nome_mae" class="form-control" style="text-transform: uppercase;"></div>
<div><label>Nome do Pai</label><input type="text" name="nome_pai" class="form-control" style="text-transform: uppercase;"></div>
</div>
</fieldset>
<fieldset class="lnsr-fieldset">
<legend class="lnsr-legend">Endereço Residencial</legend>
<div class="grid-2">
<div><label>CEP</label><input type="text" name="cep" id="cep" class="form-control mask-cep" required></div>
<div><label>Número</label><input type="text" name="numero" class="form-control" required></div>
</div>
<label>Logradouro</label>
<input type="text" name="logradouro" id="logradouro" class="form-control" required style="text-transform: uppercase;">
<label>Bairro</label>
<input type="text" name="bairro" id="bairro" class="form-control" required style="text-transform: uppercase;">
</fieldset>
<fieldset class="lnsr-fieldset" style="border-color: var(--sebrae-yellow);">
<legend class="lnsr-legend" style="color: #D97706;">Dados da Empresa / MEI</legend>
<label>Possui CNPJ?</label>
<select id="tem_cnpj" name="possui_cnpj" class="form-control">
<option value="NAO">NÃO</option>
<option value="SIM">SIM</option>
</select>
<div id="div-cnpj" style="display:none; margin-top:15px;">
<label>Número do CNPJ</label>
<input type="text" name="cnpj" id="cnpj_pj" class="mask-cnpj form-control" placeholder="00.000.000/0000-00">
</div>
</fieldset>
<button type="submit" id="btnFinalizar" class="btn-submit">
FINALIZAR CADASTRO E CONTINUAR
</button>
<button type="button" onclick="location.reload()" style="width: 100%; background: none; border: none; color: #64748b; margin-top: 15px; cursor: pointer; font-weight: 600; font-size: 0.8rem;">
<i class="fas fa-arrow-left"></i> Voltar e corrigir CPF
</button>
</form>
</div>
</div>
</main>
GEMINI
24/02/2026 às 01:08
Larinster
Prompted Pode ajustar o layout novamente, acho que quando comecei a mudar umas coisas o layout do formulário sumiu:
<section class="hero">
<div class="container">
<span class="badge-ouro">IDENTIFICAÇÃO DIGITAL</span>
<h1>Atendimento Unificado</h1>
<p class="frase-inspira">Conectando seu negócio ao futuro de Horizonte.</p>
</div>
</section>
<main class="container">
<div class="contact-card-wrapper">
<style>
/* Reset de container para o wrapper larinster */
.contact-card-wrapper { max-width: 900px; margin: 0 auto; padding: 20px; }
.lnsr-fieldset {
border: 2px solid #e2e8f0;
border-radius: 15px;
padding: 20px;
margin-bottom: 25px;
background: #f8fafc;
text-align: left;
}
.lnsr-legend {
padding: 0 15px;
font-weight: 800;
color: var(--sebrae-blue);
font-size: 0.8rem;
text-transform: uppercase;
background: #f8fafc;
border-radius: 5px;
}
.grid-2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 15px;
margin-bottom: 15px;
}
.form-control {
width: 100%;
padding: 12px;
border-radius: 10px;
border: 1px solid #cbd5e1;
margin-top: 5px;
margin-bottom: 10px;
font-family: 'Inter', sans-serif;
}
label {
font-size: 0.7rem;
font-weight: 700;
color: var(--text-light);
text-transform: uppercase;
display: block;
margin-left: 5px;
}
@media (max-width: 600px) {
.grid-2 { grid-template-columns: 1fr; }
}
</style>
<div id="container_triagem">
<form id="formID" autocomplete="off" class="contact-card">
<div style="text-align: center; margin-bottom: 30px;">
<h3 style="color: var(--sebrae-blue); font-weight: 800;">VALIDAÇÃO DE ACESSO</h3>
<p style="font-size: 0.85rem; color: var(--text-light);">Informe seu CPF para iniciar o atendimento.</p>
</div>
<input type="text" name="cpf" id="cpf" placeholder="000.000.000-00" class="lnsr-input" style="font-size: 1.4rem; text-align: center; font-weight: 800;" required>
<div id="loading_cpf" style="display:none; text-align: center; margin-bottom: 10px;">
<i class="fas fa-circle-notch fa-spin"></i> Sincronizando...
</div>
<div id="campos_extensao" style="display:none;">
<label>Nome Completo</label>
<input type="text" name="nome_completo" id="nome_usuario" class="lnsr-input" readonly style="background: #f1f5f9;">
<label>O que você busca hoje?</label>
<select name="assunto" id="assunto_select" class="lnsr-input" required>
<option value="">Selecione uma opção...</option>
<optgroup label="💡 ORIENTAÇÕES (Informativo)">
<option value="ORI_MEI" data-tipo="orientacao">Quero saber como ser MEI</option>
<option value="ORI_BOLETO" data-tipo="orientacao">Como emitir meu boleto DAS</option>
<option value="ORI_NOTAFISCAL" data-tipo="orientacao">Como emitir Nota Fiscal</option>
</optgroup>
<optgroup label="⚙️ SERVIÇOS DIGITAIS (Solicitação)">
<option value="FORMALIZACAO MEI" data-tipo="servico">Formalização MEI (Abertura)</option>
<option value="DECLARACAO ANUAL DASN" data-tipo="servico">Fazer Declaração Anual</option>
<option value="ALTERACAO_BAIXA" data-tipo="servico">Alteração ou Baixa de CNPJ</option>
<option value="OUTROS" data-tipo="servico">Outros Assuntos</option>
</optgroup>
</select>
<div id="bloco_orientacao" style="display:none; background: #e6f0ff; border-left: 5px solid var(--sebrae-blue); padding: 20px; border-radius: 8px; margin-bottom: 20px; text-align: left;">
<div id="texto_orientacao" style="font-size: 0.9rem; color: #003399; line-height: 1.5;"></div>
<p style="margin-top:15px; font-size: 0.75rem; font-weight: 700; color: var(--sebrae-blue);">
<i class="fas fa-info-circle"></i> Ao clicar abaixo, um protocolo de orientação será registrado.
</p>
</div>
<div id="bloco_mensagem" style="display:none; text-align: left;">
<label>Detalhes da Solicitação</label>
<textarea name="mensagem" id="mensagem_input" class="lnsr-input" rows="3" placeholder="Como podemos te ajudar?"></textarea>
</div>
<button type="submit" id="btn_submit" class="btn-submit">Gerar Protocolo</button>
</div>
</form>
</div>
<div id="container_cadastro" style="display: none;">
<form id="formAdd" autocomplete="off" class="contact-card">
<input type="hidden" name="novo_cliente" value="1">
<div style="text-align: center; margin-bottom: 35px;">
<div style="background: #FFF9E6; color: #D97706; padding: 15px; border-radius: 12px; margin-bottom: 20px; font-weight: 700; font-size: 0.9rem; border: 1px solid #FFE6A5;">
<i class="fas fa-user-plus"></i> CPF não encontrado. Complete seu cadastro para continuar.
</div>
<h2 style="color: var(--sebrae-blue); font-weight: 900; text-transform: uppercase;">Cadastro de Usuário</h2>
</div>
<div id="campos_dinamicos">
<fieldset class="lnsr-fieldset">
<legend class="lnsr-legend">Dados Pessoais</legend>
<label>Nome Completo</label>
<input type="text" name="nome_completo" required class="form-control" style="text-transform: uppercase;">
<div class="grid-2">
<div><label>RG</label><input type="text" name="rg" class="form-control" style="text-transform: uppercase;"></div>
<div><label>Data de Nascimento</label><input type="date" name="data_nascimento" class="form-control"></div>
</div>
<div class="grid-2">
<div><label>Nome da Mãe</label><input type="text" name="nome_mae" class="form-control" style="text-transform: uppercase;"></div>
<div><label>Nome do Pai</label><input type="text" name="nome_pai" class="form-control" style="text-transform: uppercase;"></div>
</div>
<label>Naturalidade</label>
<input type="text" name="naturalidade" class="form-control" style="text-transform: uppercase;">
</fieldset>
<fieldset class="lnsr-fieldset">
<legend class="lnsr-legend">Endereço Residencial</legend>
<div class="grid-2">
<div><label>CEP</label><input type="text" name="cep" id="cep" class="form-control mask-cep" required></div>
<div><label>Número</label><input type="text" name="numero" class="form-control" required></div>
</div>
<label>Logradouro</label>
<input type="text" name="logradouro" id="logradouro" class="form-control" required style="text-transform: uppercase;">
<label>Bairro</label>
<input type="text" name="bairro" id="bairro" class="form-control" required style="text-transform: uppercase;">
<div class="grid-2">
<div><label>Cidade</label><input type="text" name="cidade" id="cidade" value="HORIZONTE" class="form-control" readonly></div>
<div><label>UF</label><input type="text" name="estado" id="estado" value="CE" class="form-control" readonly></div>
</div>
</fieldset>
<fieldset class="lnsr-fieldset" style="border-color: var(--sebrae-yellow);">
<legend class="lnsr-legend" style="color: #D97706;">Dados da Empresa / MEI</legend>
<label>Possui CNPJ?</label>
<select id="tem_cnpj" name="possui_cnpj" class="form-control">
<option value="NAO">NÃO</option>
<option value="SIM">SIM</option>
</select>
<div id="div-cnpj" style="display:none; margin-top:15px;">
<label>Número do CNPJ</label>
<input type="text" name="cnpj" id="cnpj_pj" class="mask-cnpj form-control" placeholder="00.000.000/0000-00">
<div id="div-empresa" style="display:none; margin-top:15px;">
<label>Razão Social</label>
<input type="text" name="razao_social" id="razao_social" class="form-control" style="text-transform: uppercase;">
<label>Nome Fantasia</label>
<input type="text" name="nome_fantasia" id="nome_fantasia" class="form-control" style="text-transform: uppercase;">
<input type="hidden" name="data_abertura" id="h_data_abertura">
<input type="hidden" name="atividade_principal" id="h_atividade_principal">
<input type="hidden" name="logradouro_pj" id="h_logradouro_pj">
<input type="hidden" name="numero_pj" id="h_numero_pj">
<input type="hidden" name="complemento_pj" id="h_complemento_pj">
<input type="hidden" name="cep_pj" id="h_cep_pj">
<input type="hidden" name="bairro_pj" id="h_bairro_pj">
<input type="hidden" name="municipio_pj" id="h_municipio_pj">
<input type="hidden" name="uf_pj" id="h_uf_pj">
<input type="hidden" name="email_pj" id="h_email_pj">
<input type="hidden" name="telefone_pj" id="h_telefone_pj">
<input type="hidden" name="efr" id="h_efr">
<input type="hidden" name="situacao_cadastral" id="h_situacao_cadastral">
<input type="hidden" name="data_situacao_cadastral" id="h_data_situacao_cadastral">
<input type="hidden" name="motivo_situacao_cadastral" id="h_motivo_situacao_cadastral">
</div>
</div>
</fieldset>
<fieldset class="lnsr-fieldset" style="border-color: var(--sebrae-blue);">
<legend class="lnsr-legend" style="color: var(--sebrae-blue);">Contato Direto</legend>
<div class="grid-2">
<div><label>WhatsApp</label><input type="text" name="telefone" id="tel_cadastro" class="form-control mask-tel" required></div>
<div><label>E-mail</label><input type="email" name="email" class="form-control" required></div>
</div>
</fieldset>
<button type="submit" id="btnFinalizar" style="width: 100%; padding: 22px; background: var(--sebrae-blue); color: #fff; border: none; border-radius: 12px; font-weight: 900; cursor: pointer; text-transform: uppercase; transition: 0.3s;">
FINALIZAR CADASTRO E CONTINUAR
</button>
<button type="button" onclick="location.reload()" style="width: 100%; background: none; border: none; color: #64748b; margin-top: 15px; cursor: pointer; font-weight: 600; font-size: 0.8rem;">
<i class="fas fa-arrow-left"></i> Voltar e corrigir CPF
</button>
</div>
</form>
</div>
</div>
</main>
GEMINI
24/02/2026 às 01:08
Larinster
Prompted Tem como remover apenas a parte do menu e deixar o resto original?:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sala do Empreendedor | Horizonte - CE</title>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;800&family=Open+Sans:wght@400;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<style>
:root {
--sebrae-blue: #0054A6;
--sebrae-yellow: #FFCB05;
--horizonte-blue: #003399;
--horizonte-light: #E6F0FF;
--text-dark: #333333;
--text-light: #666666;
--white: #FFFFFF;
--gold: #D4AF37;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body { background-color: #F4F7F9; color: var(--text-dark); font-family: 'Open Sans', sans-serif; line-height: 1.6; }
h1, h2, h3, h4, .font-alt { font-family: 'Montserrat', sans-serif; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
/* BARRA SUPERIOR INSTITUCIONAL */
.top-bar { background: var(--sebrae-blue); color: white; padding: 8px 0; font-size: 0.8rem; }
.top-flex { display: flex; justify-content: space-between; align-items: center; }
/* HEADER */
header { background: var(--white); padding: 20px 0; box-shadow: 0 4px 10px rgba(0,0,0,0.05); position: sticky; top: 0; z-index: 1000; }
.header-flex { display: flex; justify-content: space-between; align-items: center; }
.logo-group { display: flex; align-items: center; gap: 20px; }
.logo-img { height: 75px; width: auto; }
/* NOVO ESTILO: MENU DE NAVEGAÇÃO */
.nav-larinster {
background: #f8fafc;
border-bottom: 1px solid #e2e8f0;
padding: 0;
position: sticky;
top: 125px; /* Ajustado para ficar abaixo do header fixo */
z-index: 999;
}
.nav-container {
display: flex;
justify-content: center;
list-style: none;
gap: 40px;
}
.nav-container a {
text-decoration: none;
color: var(--sebrae-blue);
font-family: 'Montserrat', sans-serif;
font-weight: 700;
font-size: 0.85rem;
text-transform: uppercase;
padding: 15px 0;
display: block;
letter-spacing: 1px;
transition: 0.3s;
border-bottom: 3px solid transparent;
}
.nav-container a:hover {
color: var(--horizonte-blue);
border-bottom: 3px solid var(--sebrae-yellow);
}
.nav-container a.active {
border-bottom: 3px solid var(--sebrae-yellow);
}
/* HERO SECTION */
.hero { background: linear-gradient(135deg, var(--sebrae-blue) 0%, var(--horizonte-blue) 100%); color: white; padding: 80px 0 120px; text-align: center; position: relative; overflow: hidden; }
.hero::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 10px; background: var(--sebrae-yellow); }
.badge-ouro {
background: var(--sebrae-yellow); color: var(--sebrae-blue);
padding: 10px 25px; border-radius: 50px; font-weight: 800; font-size: 0.9rem;
display: inline-block; margin-bottom: 20px; box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
.hero h1 { font-size: 3rem; margin-bottom: 15px; text-shadow: 2px 2px 4px rgba(0,0,0,0.3); }
.frase-inspira { font-style: italic; font-size: 1.3rem; color: var(--horizonte-light); font-weight: 300; }
/* SEÇÃO ESTATÍSTICAS */
.stats-container { margin-top: -60px; position: relative; z-index: 20; }
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; }
.stat-card {
background: white; padding: 30px; border-radius: 15px; text-align: center;
box-shadow: 0 10px 30px rgba(0,0,0,0.1); border-bottom: 4px solid var(--sebrae-yellow);
}
.stat-number { display: block; font-size: 2.2rem; font-weight: 800; color: var(--sebrae-blue); font-family: 'Montserrat'; }
.stat-label { font-size: 0.8rem; color: var(--text-light); text-transform: uppercase; font-weight: 600; letter-spacing: 1px; }
/* CARDS DE SERVIÇOS */
.section-padding { padding: 80px 0; }
.grid-services { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 25px; margin-top: 40px; }
.card-service { background: white; padding: 30px; border-radius: 12px; border-bottom: 5px solid var(--sebrae-blue); transition: 0.3s; box-shadow: 0 5px 15px rgba(0,0,0,0.05); }
.card-service:hover { transform: translateY(-10px); box-shadow: 0 10px 25px rgba(0,0,0,0.1); }
.card-service h3 { color: var(--sebrae-blue); margin-bottom: 15px; }
/* AGENTE E SELOS */
.info-split { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.agente-highlight { background: var(--horizonte-light); padding: 40px; border-radius: 20px; border-left: 10px solid var(--sebrae-blue); display: flex; flex-direction: column; gap: 20px; }
.selos-display { display: flex; gap: 20px; margin-top: 10px; }
.selo-item { background: white; padding: 15px; border-radius: 10px; text-align: center; flex: 1; border: 1px solid #ddd; }
/* FOTOS */
.foto-container { width: 100%; height: 320px; border-radius: 15px; overflow: hidden; box-shadow: 0 5px 15px rgba(0,0,0,0.1); margin-bottom: 20px; background: #eee; }
.foto-container img { width: 100%; height: 100%; display: block; object-fit: cover; }
.foto-agente {
width: 160px;
height: 160px;
border-radius: 50%;
border: 5px solid var(--white);
margin-bottom: 15px;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
overflow: hidden;
}
.foto-agente img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* ALERTAS */
.alert-faturamento { background: #FFF9E6; border: 2px solid var(--sebrae-yellow); padding: 30px; border-radius: 15px; margin-top: 50px; display: flex; align-items: center; gap: 20px; }
/* FOOTER */
footer { background: #1A1A1A; color: white; padding: 80px 0 20px; }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 40px; margin-bottom: 50px; }
.footer-logos { display: flex; justify-content: center; align-items: center; gap: 40px; background: white; padding: 30px; border-radius: 15px; margin-bottom: 60px; flex-wrap: wrap; }
.footer-logos img { height: 55px; width: auto; object-fit: contain; }
.larinster-tag { text-align: center; font-size: 0.75rem; color: #888; border-top: 1px solid #333; padding-top: 20px; letter-spacing: 2px; }
.parceiros-container { display: flex; justify-content: space-around; align-items: center; flex-wrap: wrap; gap: 40px; filter: grayscale(100%); opacity: 0.6; transition: 0.5s; }
.parceiros-container:hover { filter: grayscale(0%); opacity: 1; }
/* --- NOVAS REGRAS DE RESPONSIVIDADE --- */
@media (max-width: 992px) {
.hero h1 { font-size: 2.2rem; }
.info-split { grid-template-columns: 1fr; }
.grid-services { grid-template-columns: repeat(2, 1fr); }
.nav-container { gap: 20px; }
}
@media (max-width: 768px) {
.header-flex { flex-direction: column; text-align: center; gap: 15px; }
header div[style*="text-align: right"] { text-align: center !important; }
.top-flex { flex-direction: column; gap: 5px; text-align: center; }
.hero { padding: 60px 0 100px; }
.hero h1 { font-size: 1.8rem; }
.frase-inspira { font-size: 1.1rem; }
.grid-services { grid-template-columns: 1fr; }
/* Ajuste da seção de licitações */
div[style*="grid-column: span 2"] { grid-column: span 1 !important; }
div[style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important; }
/* Ajuste do cabeçalho de seção com ícone */
div[style*="display: flex; align-items: center; gap: 20px"] {
flex-direction: column;
text-align: center;
}
.alert-faturamento { flex-direction: column; text-align: center; }
.agente-highlight { padding: 25px; align-items: center; text-align: center; }
.selos-display { flex-direction: column; width: 100%; }
/* Cursos header */
div[style*="justify-content: space-between; align-items: flex-end"] {
flex-direction: column;
align-items: center;
text-align: center;
gap: 20px;
}
/* Nav Mobile */
.nav-larinster { top: 0; position: relative; }
.nav-container { gap: 10px; flex-wrap: wrap; }
.nav-container a { font-size: 0.75rem; padding: 10px 5px; }
}
@media (max-width: 480px) {
.logo-img { height: 60px; }
.stat-card { padding: 20px; }
.stat-number { font-size: 1.8rem; }
.section-padding { padding: 40px 0; }
}
</style>
</head>
<body>
<div class="top-bar" style="background: var(--sebrae-blue); color: white; padding: 6px 0; font-size: 0.7rem; font-family: 'Montserrat', sans-serif;">
<div class="container" style="display: flex; justify-content: flex-end; align-items: center; padding: 0 20px;">
<div style="display: flex; align-items: center; gap: 8px;">
<div class="status-dot"></div>
<span style="letter-spacing: 0.5px; text-transform: uppercase; font-weight: 500;">Conexão Ativa: <strong style="color: #00ff88;">Sistema Larinster</strong></span>
</div>
</div>
</div>
<header class="main-header">
<div class="container header-grid">
<div class="header-left">
<div class="authority-badge">
<p class="label-small">Município de</p>
<p class="city-name">HORIZONTE</p>
<p class="state-name">ESTADO DO CEARÁ</p>
</div>
</div>
<div class="header-center">
<a>
<img src="https://empreenderhorizonte.com/wp-content/uploads/2025/02/Logo-2.0.2-Sala-Do-Empreendedor-Horizonte-300x160.png" class="logo-main" alt="Logo Sala do Empreendedor Horizonte">
</a>
</div>
<div class="header-right">
<div class="transparency-info">
<p>PORTAL DA TRANSPARÊNCIA</p>
<p class="highlight">REFERÊNCIA EM DESENVOLVIMENTO</p>
</div>
</div>
</div>
</header>
<nav class="nav-larinster">
<div class="container">
<ul class="nav-container">
<li><a href="./"><i class="fas fa-home"></i> Inicio</a></li>
<li><a href="../estrutura/" class="active"><i class="fas fa-building"></i> Estrutura</a></li>
<li><a href="../EmpreendedorDigital/"><i class="fas fa-envelope"></i> Contato</a></li>
</ul>
</div>
</nav>
<style>
/* Estrutura Base (Desktop) */
.main-header {
border-bottom: 4px solid var(--sebrae-yellow);
background: white;
padding: 15px 0;
}
.header-grid {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 20px;
}
.authority-badge { border-left: 3px solid var(--sebrae-yellow); padding-left: 15px; }
.label-small { margin: 0; font-size: 0.65rem; color: var(--text-light); text-transform: uppercase; letter-spacing: 1px; }
.city-name { margin: 0; font-size: 1.3rem; font-weight: 900; color: var(--horizonte-blue); line-height: 1; }
.state-name { margin: 0; font-size: 0.6rem; color: var(--sebrae-blue); font-weight: 700; }
.logo-main { max-height: 85px; width: auto; display: block; margin: 0 auto; }
.transparency-info { text-align: right; color: var(--text-light); font-size: 0.65rem; font-weight: 600; }
.transparency-info .highlight { color: var(--sebrae-blue); margin: 0; text-transform: uppercase; }
.status-dot { width: 7px; height: 7px; background: #00ff88; border-radius: 50%; box-shadow: 0 0 10px #00ff88; animation: pulse 2s infinite; }
@keyframes pulse {
0% { opacity: 1; transform: scale(1); }
50% { opacity: 0.4; transform: scale(1.1); }
100% { opacity: 1; transform: scale(1); }
}
/* RESPONSIVIDADE (Ajuste solicitado) */
@media (max-width: 768px) {
.header-grid {
grid-template-columns: 1fr; /* Apenas uma coluna para a logo */
padding: 10px 0;
}
/* OCULTA as laterais no mobile */
.header-left, .header-right {
display: none !important;
}
.logo-main {
max-height: 70px; /* Reduz um pouco a logo no celular para ganhar espaço */
}
.top-bar .container {
justify-content: center; /* Centraliza o status do sistema no celular */
}
}
</style>
GEMINI
24/02/2026 às 01:08
Larinster
Prompted Como fica o header depois que foi movido apenas a parte do menu?:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sala do Empreendedor | Horizonte - CE</title>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;800&family=Open+Sans:wght@400;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<style>
:root {
--sebrae-blue: #0054A6;
--sebrae-yellow: #FFCB05;
--horizonte-blue: #003399;
--horizonte-light: #E6F0FF;
--text-dark: #333333;
--text-light: #666666;
--white: #FFFFFF;
--gold: #D4AF37;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body { background-color: #F4F7F9; color: var(--text-dark); font-family: 'Open Sans', sans-serif; line-height: 1.6; }
h1, h2, h3, h4, .font-alt { font-family: 'Montserrat', sans-serif; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
/* BARRA SUPERIOR INSTITUCIONAL */
.top-bar { background: var(--sebrae-blue); color: white; padding: 8px 0; font-size: 0.8rem; }
.top-flex { display: flex; justify-content: space-between; align-items: center; }
/* HEADER */
header { background: var(--white); padding: 20px 0; box-shadow: 0 4px 10px rgba(0,0,0,0.05); position: sticky; top: 0; z-index: 1000; }
.header-flex { display: flex; justify-content: space-between; align-items: center; }
.logo-group { display: flex; align-items: center; gap: 20px; }
.logo-img { height: 75px; width: auto; }
/* NOVO ESTILO: MENU DE NAVEGAÇÃO */
.nav-larinster {
background: #f8fafc;
border-bottom: 1px solid #e2e8f0;
padding: 0;
position: sticky;
top: 125px; /* Ajustado para ficar abaixo do header fixo */
z-index: 999;
}
.nav-container {
display: flex;
justify-content: center;
list-style: none;
gap: 40px;
}
.nav-container a {
text-decoration: none;
color: var(--sebrae-blue);
font-family: 'Montserrat', sans-serif;
font-weight: 700;
font-size: 0.85rem;
text-transform: uppercase;
padding: 15px 0;
display: block;
letter-spacing: 1px;
transition: 0.3s;
border-bottom: 3px solid transparent;
}
.nav-container a:hover {
color: var(--horizonte-blue);
border-bottom: 3px solid var(--sebrae-yellow);
}
.nav-container a.active {
border-bottom: 3px solid var(--sebrae-yellow);
}
/* HERO SECTION */
.hero { background: linear-gradient(135deg, var(--sebrae-blue) 0%, var(--horizonte-blue) 100%); color: white; padding: 80px 0 120px; text-align: center; position: relative; overflow: hidden; }
.hero::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 10px; background: var(--sebrae-yellow); }
.badge-ouro {
background: var(--sebrae-yellow); color: var(--sebrae-blue);
padding: 10px 25px; border-radius: 50px; font-weight: 800; font-size: 0.9rem;
display: inline-block; margin-bottom: 20px; box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
.hero h1 { font-size: 3rem; margin-bottom: 15px; text-shadow: 2px 2px 4px rgba(0,0,0,0.3); }
.frase-inspira { font-style: italic; font-size: 1.3rem; color: var(--horizonte-light); font-weight: 300; }
/* SEÇÃO ESTATÍSTICAS */
.stats-container { margin-top: -60px; position: relative; z-index: 20; }
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; }
.stat-card {
background: white; padding: 30px; border-radius: 15px; text-align: center;
box-shadow: 0 10px 30px rgba(0,0,0,0.1); border-bottom: 4px solid var(--sebrae-yellow);
}
.stat-number { display: block; font-size: 2.2rem; font-weight: 800; color: var(--sebrae-blue); font-family: 'Montserrat'; }
.stat-label { font-size: 0.8rem; color: var(--text-light); text-transform: uppercase; font-weight: 600; letter-spacing: 1px; }
/* CARDS DE SERVIÇOS */
.section-padding { padding: 80px 0; }
.grid-services { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 25px; margin-top: 40px; }
.card-service { background: white; padding: 30px; border-radius: 12px; border-bottom: 5px solid var(--sebrae-blue); transition: 0.3s; box-shadow: 0 5px 15px rgba(0,0,0,0.05); }
.card-service:hover { transform: translateY(-10px); box-shadow: 0 10px 25px rgba(0,0,0,0.1); }
.card-service h3 { color: var(--sebrae-blue); margin-bottom: 15px; }
/* AGENTE E SELOS */
.info-split { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.agente-highlight { background: var(--horizonte-light); padding: 40px; border-radius: 20px; border-left: 10px solid var(--sebrae-blue); display: flex; flex-direction: column; gap: 20px; }
.selos-display { display: flex; gap: 20px; margin-top: 10px; }
.selo-item { background: white; padding: 15px; border-radius: 10px; text-align: center; flex: 1; border: 1px solid #ddd; }
/* FOTOS */
.foto-container { width: 100%; height: 320px; border-radius: 15px; overflow: hidden; box-shadow: 0 5px 15px rgba(0,0,0,0.1); margin-bottom: 20px; background: #eee; }
.foto-container img { width: 100%; height: 100%; display: block; object-fit: cover; }
.foto-agente {
width: 160px;
height: 160px;
border-radius: 50%;
border: 5px solid var(--white);
margin-bottom: 15px;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
overflow: hidden;
}
.foto-agente img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* ALERTAS */
.alert-faturamento { background: #FFF9E6; border: 2px solid var(--sebrae-yellow); padding: 30px; border-radius: 15px; margin-top: 50px; display: flex; align-items: center; gap: 20px; }
/* FOOTER */
footer { background: #1A1A1A; color: white; padding: 80px 0 20px; }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 40px; margin-bottom: 50px; }
.footer-logos { display: flex; justify-content: center; align-items: center; gap: 40px; background: white; padding: 30px; border-radius: 15px; margin-bottom: 60px; flex-wrap: wrap; }
.footer-logos img { height: 55px; width: auto; object-fit: contain; }
.larinster-tag { text-align: center; font-size: 0.75rem; color: #888; border-top: 1px solid #333; padding-top: 20px; letter-spacing: 2px; }
.parceiros-container { display: flex; justify-content: space-around; align-items: center; flex-wrap: wrap; gap: 40px; filter: grayscale(100%); opacity: 0.6; transition: 0.5s; }
.parceiros-container:hover { filter: grayscale(0%); opacity: 1; }
/* --- NOVAS REGRAS DE RESPONSIVIDADE --- */
@media (max-width: 992px) {
.hero h1 { font-size: 2.2rem; }
.info-split { grid-template-columns: 1fr; }
.grid-services { grid-template-columns: repeat(2, 1fr); }
.nav-container { gap: 20px; }
}
@media (max-width: 768px) {
.header-flex { flex-direction: column; text-align: center; gap: 15px; }
header div[style*="text-align: right"] { text-align: center !important; }
.top-flex { flex-direction: column; gap: 5px; text-align: center; }
.hero { padding: 60px 0 100px; }
.hero h1 { font-size: 1.8rem; }
.frase-inspira { font-size: 1.1rem; }
.grid-services { grid-template-columns: 1fr; }
/* Ajuste da seção de licitações */
div[style*="grid-column: span 2"] { grid-column: span 1 !important; }
div[style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important; }
/* Ajuste do cabeçalho de seção com ícone */
div[style*="display: flex; align-items: center; gap: 20px"] {
flex-direction: column;
text-align: center;
}
.alert-faturamento { flex-direction: column; text-align: center; }
.agente-highlight { padding: 25px; align-items: center; text-align: center; }
.selos-display { flex-direction: column; width: 100%; }
/* Cursos header */
div[style*="justify-content: space-between; align-items: flex-end"] {
flex-direction: column;
align-items: center;
text-align: center;
gap: 20px;
}
/* Nav Mobile */
.nav-larinster { top: 0; position: relative; }
.nav-container { gap: 10px; flex-wrap: wrap; }
.nav-container a { font-size: 0.75rem; padding: 10px 5px; }
}
@media (max-width: 480px) {
.logo-img { height: 60px; }
.stat-card { padding: 20px; }
.stat-number { font-size: 1.8rem; }
.section-padding { padding: 40px 0; }
}
</style>
</head>
<body>
<div class="top-bar" style="background: var(--sebrae-blue); color: white; padding: 6px 0; font-size: 0.7rem; font-family: 'Montserrat', sans-serif;">
<div class="container" style="display: flex; justify-content: flex-end; align-items: center; padding: 0 20px;">
<div style="display: flex; align-items: center; gap: 8px;">
<div class="status-dot"></div>
<span style="letter-spacing: 0.5px; text-transform: uppercase; font-weight: 500;">Conexão Ativa: <strong style="color: #00ff88;">Sistema Larinster</strong></span>
</div>
</div>
</div>
<header class="main-header">
<div class="container header-grid">
<div class="header-left">
<div class="authority-badge">
<p class="label-small">Município de</p>
<p class="city-name">HORIZONTE</p>
<p class="state-name">ESTADO DO CEARÁ</p>
</div>
</div>
<div class="header-center">
<a>
<img src="https://empreenderhorizonte.com/wp-content/uploads/2025/02/Logo-2.0.2-Sala-Do-Empreendedor-Horizonte-300x160.png" class="logo-main" alt="Logo Sala do Empreendedor Horizonte">
</a>
</div>
<div class="header-right">
<div class="transparency-info">
<p>PORTAL DA TRANSPARÊNCIA</p>
<p class="highlight">REFERÊNCIA EM DESENVOLVIMENTO</p>
</div>
</div>
</div>
</header>
<nav class="nav-larinster">
<div class="container">
<ul class="nav-container">
<li><a href="./"><i class="fas fa-home"></i> Inicio</a></li>
<li><a href="../estrutura/" class="active"><i class="fas fa-building"></i> Estrutura</a></li>
<li><a href="../EmpreendedorDigital/"><i class="fas fa-envelope"></i> Contato</a></li>
</ul>
</div>
</nav>
<style>
/* Estrutura Base (Desktop) */
.main-header {
border-bottom: 4px solid var(--sebrae-yellow);
background: white;
padding: 15px 0;
}
.header-grid {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 20px;
}
.authority-badge { border-left: 3px solid var(--sebrae-yellow); padding-left: 15px; }
.label-small { margin: 0; font-size: 0.65rem; color: var(--text-light); text-transform: uppercase; letter-spacing: 1px; }
.city-name { margin: 0; font-size: 1.3rem; font-weight: 900; color: var(--horizonte-blue); line-height: 1; }
.state-name { margin: 0; font-size: 0.6rem; color: var(--sebrae-blue); font-weight: 700; }
.logo-main { max-height: 85px; width: auto; display: block; margin: 0 auto; }
.transparency-info { text-align: right; color: var(--text-light); font-size: 0.65rem; font-weight: 600; }
.transparency-info .highlight { color: var(--sebrae-blue); margin: 0; text-transform: uppercase; }
.status-dot { width: 7px; height: 7px; background: #00ff88; border-radius: 50%; box-shadow: 0 0 10px #00ff88; animation: pulse 2s infinite; }
@keyframes pulse {
0% { opacity: 1; transform: scale(1); }
50% { opacity: 0.4; transform: scale(1.1); }
100% { opacity: 1; transform: scale(1); }
}
/* RESPONSIVIDADE (Ajuste solicitado) */
@media (max-width: 768px) {
.header-grid {
grid-template-columns: 1fr; /* Apenas uma coluna para a logo */
padding: 10px 0;
}
/* OCULTA as laterais no mobile */
.header-left, .header-right {
display: none !important;
}
.logo-main {
max-height: 70px; /* Reduz um pouco a logo no celular para ganhar espaço */
}
.top-bar .container {
justify-content: center; /* Centraliza o status do sistema no celular */
}
}
</style>
GEMINI
24/02/2026 às 01:08
Larinster
Prompted Criei três arquivos na pasta includes, sendo header.php (Já foi inserido), menu.php (Precisa inserir os dados) e footer.php (Já inserido), preciso que separe pra mim somente a parte do menu que está dentro do header.php para eu incluir no arquivo menu.php:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sala do Empreendedor | Horizonte - CE</title>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;800&family=Open+Sans:wght@400;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<style>
:root {
--sebrae-blue: #0054A6;
--sebrae-yellow: #FFCB05;
--horizonte-blue: #003399;
--horizonte-light: #E6F0FF;
--text-dark: #333333;
--text-light: #666666;
--white: #FFFFFF;
--gold: #D4AF37;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body { background-color: #F4F7F9; color: var(--text-dark); font-family: 'Open Sans', sans-serif; line-height: 1.6; }
h1, h2, h3, h4, .font-alt { font-family: 'Montserrat', sans-serif; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
/* BARRA SUPERIOR INSTITUCIONAL */
.top-bar { background: var(--sebrae-blue); color: white; padding: 8px 0; font-size: 0.8rem; }
.top-flex { display: flex; justify-content: space-between; align-items: center; }
/* HEADER */
header { background: var(--white); padding: 20px 0; box-shadow: 0 4px 10px rgba(0,0,0,0.05); position: sticky; top: 0; z-index: 1000; }
.header-flex { display: flex; justify-content: space-between; align-items: center; }
.logo-group { display: flex; align-items: center; gap: 20px; }
.logo-img { height: 75px; width: auto; }
/* NOVO ESTILO: MENU DE NAVEGAÇÃO */
.nav-larinster {
background: #f8fafc;
border-bottom: 1px solid #e2e8f0;
padding: 0;
position: sticky;
top: 125px; /* Ajustado para ficar abaixo do header fixo */
z-index: 999;
}
.nav-container {
display: flex;
justify-content: center;
list-style: none;
gap: 40px;
}
.nav-container a {
text-decoration: none;
color: var(--sebrae-blue);
font-family: 'Montserrat', sans-serif;
font-weight: 700;
font-size: 0.85rem;
text-transform: uppercase;
padding: 15px 0;
display: block;
letter-spacing: 1px;
transition: 0.3s;
border-bottom: 3px solid transparent;
}
.nav-container a:hover {
color: var(--horizonte-blue);
border-bottom: 3px solid var(--sebrae-yellow);
}
.nav-container a.active {
border-bottom: 3px solid var(--sebrae-yellow);
}
/* HERO SECTION */
.hero { background: linear-gradient(135deg, var(--sebrae-blue) 0%, var(--horizonte-blue) 100%); color: white; padding: 80px 0 120px; text-align: center; position: relative; overflow: hidden; }
.hero::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 10px; background: var(--sebrae-yellow); }
.badge-ouro {
background: var(--sebrae-yellow); color: var(--sebrae-blue);
padding: 10px 25px; border-radius: 50px; font-weight: 800; font-size: 0.9rem;
display: inline-block; margin-bottom: 20px; box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
.hero h1 { font-size: 3rem; margin-bottom: 15px; text-shadow: 2px 2px 4px rgba(0,0,0,0.3); }
.frase-inspira { font-style: italic; font-size: 1.3rem; color: var(--horizonte-light); font-weight: 300; }
/* SEÇÃO ESTATÍSTICAS */
.stats-container { margin-top: -60px; position: relative; z-index: 20; }
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; }
.stat-card {
background: white; padding: 30px; border-radius: 15px; text-align: center;
box-shadow: 0 10px 30px rgba(0,0,0,0.1); border-bottom: 4px solid var(--sebrae-yellow);
}
.stat-number { display: block; font-size: 2.2rem; font-weight: 800; color: var(--sebrae-blue); font-family: 'Montserrat'; }
.stat-label { font-size: 0.8rem; color: var(--text-light); text-transform: uppercase; font-weight: 600; letter-spacing: 1px; }
/* CARDS DE SERVIÇOS */
.section-padding { padding: 80px 0; }
.grid-services { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 25px; margin-top: 40px; }
.card-service { background: white; padding: 30px; border-radius: 12px; border-bottom: 5px solid var(--sebrae-blue); transition: 0.3s; box-shadow: 0 5px 15px rgba(0,0,0,0.05); }
.card-service:hover { transform: translateY(-10px); box-shadow: 0 10px 25px rgba(0,0,0,0.1); }
.card-service h3 { color: var(--sebrae-blue); margin-bottom: 15px; }
/* AGENTE E SELOS */
.info-split { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.agente-highlight { background: var(--horizonte-light); padding: 40px; border-radius: 20px; border-left: 10px solid var(--sebrae-blue); display: flex; flex-direction: column; gap: 20px; }
.selos-display { display: flex; gap: 20px; margin-top: 10px; }
.selo-item { background: white; padding: 15px; border-radius: 10px; text-align: center; flex: 1; border: 1px solid #ddd; }
/* FOTOS */
.foto-container { width: 100%; height: 320px; border-radius: 15px; overflow: hidden; box-shadow: 0 5px 15px rgba(0,0,0,0.1); margin-bottom: 20px; background: #eee; }
.foto-container img { width: 100%; height: 100%; display: block; object-fit: cover; }
.foto-agente {
width: 160px;
height: 160px;
border-radius: 50%;
border: 5px solid var(--white);
margin-bottom: 15px;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
overflow: hidden;
}
.foto-agente img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* ALERTAS */
.alert-faturamento { background: #FFF9E6; border: 2px solid var(--sebrae-yellow); padding: 30px; border-radius: 15px; margin-top: 50px; display: flex; align-items: center; gap: 20px; }
/* FOOTER */
footer { background: #1A1A1A; color: white; padding: 80px 0 20px; }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 40px; margin-bottom: 50px; }
.footer-logos { display: flex; justify-content: center; align-items: center; gap: 40px; background: white; padding: 30px; border-radius: 15px; margin-bottom: 60px; flex-wrap: wrap; }
.footer-logos img { height: 55px; width: auto; object-fit: contain; }
.larinster-tag { text-align: center; font-size: 0.75rem; color: #888; border-top: 1px solid #333; padding-top: 20px; letter-spacing: 2px; }
.parceiros-container { display: flex; justify-content: space-around; align-items: center; flex-wrap: wrap; gap: 40px; filter: grayscale(100%); opacity: 0.6; transition: 0.5s; }
.parceiros-container:hover { filter: grayscale(0%); opacity: 1; }
/* --- NOVAS REGRAS DE RESPONSIVIDADE --- */
@media (max-width: 992px) {
.hero h1 { font-size: 2.2rem; }
.info-split { grid-template-columns: 1fr; }
.grid-services { grid-template-columns: repeat(2, 1fr); }
.nav-container { gap: 20px; }
}
@media (max-width: 768px) {
.header-flex { flex-direction: column; text-align: center; gap: 15px; }
header div[style*="text-align: right"] { text-align: center !important; }
.top-flex { flex-direction: column; gap: 5px; text-align: center; }
.hero { padding: 60px 0 100px; }
.hero h1 { font-size: 1.8rem; }
.frase-inspira { font-size: 1.1rem; }
.grid-services { grid-template-columns: 1fr; }
/* Ajuste da seção de licitações */
div[style*="grid-column: span 2"] { grid-column: span 1 !important; }
div[style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important; }
/* Ajuste do cabeçalho de seção com ícone */
div[style*="display: flex; align-items: center; gap: 20px"] {
flex-direction: column;
text-align: center;
}
.alert-faturamento { flex-direction: column; text-align: center; }
.agente-highlight { padding: 25px; align-items: center; text-align: center; }
.selos-display { flex-direction: column; width: 100%; }
/* Cursos header */
div[style*="justify-content: space-between; align-items: flex-end"] {
flex-direction: column;
align-items: center;
text-align: center;
gap: 20px;
}
/* Nav Mobile */
.nav-larinster { top: 0; position: relative; }
.nav-container { gap: 10px; flex-wrap: wrap; }
.nav-container a { font-size: 0.75rem; padding: 10px 5px; }
}
@media (max-width: 480px) {
.logo-img { height: 60px; }
.stat-card { padding: 20px; }
.stat-number { font-size: 1.8rem; }
.section-padding { padding: 40px 0; }
}
</style>
</head>
<body>
<div class="top-bar" style="background: var(--sebrae-blue); color: white; padding: 6px 0; font-size: 0.7rem; font-family: 'Montserrat', sans-serif;">
<div class="container" style="display: flex; justify-content: flex-end; align-items: center; padding: 0 20px;">
<div style="display: flex; align-items: center; gap: 8px;">
<div class="status-dot"></div>
<span style="letter-spacing: 0.5px; text-transform: uppercase; font-weight: 500;">Conexão Ativa: <strong style="color: #00ff88;">Sistema Larinster</strong></span>
</div>
</div>
</div>
<header class="main-header">
<div class="container header-grid">
<div class="header-left">
<div class="authority-badge">
<p class="label-small">Município de</p>
<p class="city-name">HORIZONTE</p>
<p class="state-name">ESTADO DO CEARÁ</p>
</div>
</div>
<div class="header-center">
<a>
<img src="https://empreenderhorizonte.com/wp-content/uploads/2025/02/Logo-2.0.2-Sala-Do-Empreendedor-Horizonte-300x160.png" class="logo-main" alt="Logo Sala do Empreendedor Horizonte">
</a>
</div>
<div class="header-right">
<div class="transparency-info">
<p>PORTAL DA TRANSPARÊNCIA</p>
<p class="highlight">REFERÊNCIA EM DESENVOLVIMENTO</p>
</div>
</div>
</div>
</header>
<nav class="nav-larinster">
<div class="container">
<ul class="nav-container">
<li><a href="./"><i class="fas fa-home"></i> Inicio</a></li>
<li><a href="../estrutura/" class="active"><i class="fas fa-building"></i> Estrutura</a></li>
<li><a href="../EmpreendedorDigital/"><i class="fas fa-envelope"></i> Contato</a></li>
</ul>
</div>
</nav>
<style>
/* Estrutura Base (Desktop) */
.main-header {
border-bottom: 4px solid var(--sebrae-yellow);
background: white;
padding: 15px 0;
}
.header-grid {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 20px;
}
.authority-badge { border-left: 3px solid var(--sebrae-yellow); padding-left: 15px; }
.label-small { margin: 0; font-size: 0.65rem; color: var(--text-light); text-transform: uppercase; letter-spacing: 1px; }
.city-name { margin: 0; font-size: 1.3rem; font-weight: 900; color: var(--horizonte-blue); line-height: 1; }
.state-name { margin: 0; font-size: 0.6rem; color: var(--sebrae-blue); font-weight: 700; }
.logo-main { max-height: 85px; width: auto; display: block; margin: 0 auto; }
.transparency-info { text-align: right; color: var(--text-light); font-size: 0.65rem; font-weight: 600; }
.transparency-info .highlight { color: var(--sebrae-blue); margin: 0; text-transform: uppercase; }
.status-dot { width: 7px; height: 7px; background: #00ff88; border-radius: 50%; box-shadow: 0 0 10px #00ff88; animation: pulse 2s infinite; }
@keyframes pulse {
0% { opacity: 1; transform: scale(1); }
50% { opacity: 0.4; transform: scale(1.1); }
100% { opacity: 1; transform: scale(1); }
}
/* RESPONSIVIDADE (Ajuste solicitado) */
@media (max-width: 768px) {
.header-grid {
grid-template-columns: 1fr; /* Apenas uma coluna para a logo */
padding: 10px 0;
}
/* OCULTA as laterais no mobile */
.header-left, .header-right {
display: none !important;
}
.logo-main {
max-height: 70px; /* Reduz um pouco a logo no celular para ganhar espaço */
}
.top-bar .container {
justify-content: center; /* Centraliza o status do sistema no celular */
}
}
</style>
GEMINI
24/02/2026 às 01:08
Larinster
Prompted Preciso que você crie pra mim nesta parte reservada a informação que o site está sendo atualizado, pois eu vou remover o sistema antigo e preciso que essa nova página já informe que teremos mudanças neste ano de 2026:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sala do Empreendedor | Horizonte - CE</title>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;800&family=Open+Sans:wght@400;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<style>
:root {
--sebrae-blue: #0054A6;
--sebrae-yellow: #FFCB05;
--horizonte-blue: #003399;
--horizonte-light: #E6F0FF;
--text-dark: #333333;
--text-light: #666666;
--white: #FFFFFF;
--gold: #D4AF37;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body { background-color: #F4F7F9; color: var(--text-dark); font-family: 'Open Sans', sans-serif; line-height: 1.6; }
h1, h2, h3, h4, .font-alt { font-family: 'Montserrat', sans-serif; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
/* BARRA SUPERIOR INSTITUCIONAL */
.top-bar { background: var(--sebrae-blue); color: white; padding: 8px 0; font-size: 0.8rem; }
.top-flex { display: flex; justify-content: space-between; align-items: center; }
/* HEADER */
header { background: var(--white); padding: 20px 0; box-shadow: 0 4px 10px rgba(0,0,0,0.05); position: sticky; top: 0; z-index: 1000; }
.header-flex { display: flex; justify-content: space-between; align-items: center; }
.logo-group { display: flex; align-items: center; gap: 20px; }
.logo-img { height: 75px; width: auto; }
/* NOVO ESTILO: MENU DE NAVEGAÇÃO */
.nav-larinster {
background: #f8fafc;
border-bottom: 1px solid #e2e8f0;
padding: 0;
position: sticky;
top: 125px; /* Ajustado para ficar abaixo do header fixo */
z-index: 999;
}
.nav-container {
display: flex;
justify-content: center;
list-style: none;
gap: 40px;
}
.nav-container a {
text-decoration: none;
color: var(--sebrae-blue);
font-family: 'Montserrat', sans-serif;
font-weight: 700;
font-size: 0.85rem;
text-transform: uppercase;
padding: 15px 0;
display: block;
letter-spacing: 1px;
transition: 0.3s;
border-bottom: 3px solid transparent;
}
.nav-container a:hover {
color: var(--horizonte-blue);
border-bottom: 3px solid var(--sebrae-yellow);
}
.nav-container a.active {
border-bottom: 3px solid var(--sebrae-yellow);
}
/* HERO SECTION */
.hero { background: linear-gradient(135deg, var(--sebrae-blue) 0%, var(--horizonte-blue) 100%); color: white; padding: 80px 0 120px; text-align: center; position: relative; overflow: hidden; }
.hero::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 10px; background: var(--sebrae-yellow); }
.badge-ouro {
background: var(--sebrae-yellow); color: var(--sebrae-blue);
padding: 10px 25px; border-radius: 50px; font-weight: 800; font-size: 0.9rem;
display: inline-block; margin-bottom: 20px; box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
.hero h1 { font-size: 3rem; margin-bottom: 15px; text-shadow: 2px 2px 4px rgba(0,0,0,0.3); }
.frase-inspira { font-style: italic; font-size: 1.3rem; color: var(--horizonte-light); font-weight: 300; }
/* SEÇÃO ESTATÍSTICAS */
.stats-container { margin-top: -60px; position: relative; z-index: 20; }
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; }
.stat-card {
background: white; padding: 30px; border-radius: 15px; text-align: center;
box-shadow: 0 10px 30px rgba(0,0,0,0.1); border-bottom: 4px solid var(--sebrae-yellow);
}
.stat-number { display: block; font-size: 2.2rem; font-weight: 800; color: var(--sebrae-blue); font-family: 'Montserrat'; }
.stat-label { font-size: 0.8rem; color: var(--text-light); text-transform: uppercase; font-weight: 600; letter-spacing: 1px; }
/* CARDS DE SERVIÇOS */
.section-padding { padding: 80px 0; }
.grid-services { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 25px; margin-top: 40px; }
.card-service { background: white; padding: 30px; border-radius: 12px; border-bottom: 5px solid var(--sebrae-blue); transition: 0.3s; box-shadow: 0 5px 15px rgba(0,0,0,0.05); }
.card-service:hover { transform: translateY(-10px); box-shadow: 0 10px 25px rgba(0,0,0,0.1); }
.card-service h3 { color: var(--sebrae-blue); margin-bottom: 15px; }
/* AGENTE E SELOS */
.info-split { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.agente-highlight { background: var(--horizonte-light); padding: 40px; border-radius: 20px; border-left: 10px solid var(--sebrae-blue); display: flex; flex-direction: column; gap: 20px; }
.selos-display { display: flex; gap: 20px; margin-top: 10px; }
.selo-item { background: white; padding: 15px; border-radius: 10px; text-align: center; flex: 1; border: 1px solid #ddd; }
/* FOTOS */
.foto-container { width: 100%; height: 320px; border-radius: 15px; overflow: hidden; box-shadow: 0 5px 15px rgba(0,0,0,0.1); margin-bottom: 20px; background: #eee; }
.foto-container img { width: 100%; height: 100%; display: block; object-fit: cover; }
.foto-agente {
width: 160px;
height: 160px;
border-radius: 50%;
border: 5px solid var(--white);
margin-bottom: 15px;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
overflow: hidden;
}
.foto-agente img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* ALERTAS */
.alert-faturamento { background: #FFF9E6; border: 2px solid var(--sebrae-yellow); padding: 30px; border-radius: 15px; margin-top: 50px; display: flex; align-items: center; gap: 20px; }
/* FOOTER */
footer { background: #1A1A1A; color: white; padding: 80px 0 20px; }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 40px; margin-bottom: 50px; }
.footer-logos { display: flex; justify-content: center; align-items: center; gap: 40px; background: white; padding: 30px; border-radius: 15px; margin-bottom: 60px; flex-wrap: wrap; }
.footer-logos img { height: 55px; width: auto; object-fit: contain; }
.larinster-tag { text-align: center; font-size: 0.75rem; color: #888; border-top: 1px solid #333; padding-top: 20px; letter-spacing: 2px; }
.parceiros-container { display: flex; justify-content: space-around; align-items: center; flex-wrap: wrap; gap: 40px; filter: grayscale(100%); opacity: 0.6; transition: 0.5s; }
.parceiros-container:hover { filter: grayscale(0%); opacity: 1; }
/* --- NOVAS REGRAS DE RESPONSIVIDADE --- */
@media (max-width: 992px) {
.hero h1 { font-size: 2.2rem; }
.info-split { grid-template-columns: 1fr; }
.grid-services { grid-template-columns: repeat(2, 1fr); }
.nav-container { gap: 20px; }
}
@media (max-width: 768px) {
.header-flex { flex-direction: column; text-align: center; gap: 15px; }
header div[style*="text-align: right"] { text-align: center !important; }
.top-flex { flex-direction: column; gap: 5px; text-align: center; }
.hero { padding: 60px 0 100px; }
.hero h1 { font-size: 1.8rem; }
.frase-inspira { font-size: 1.1rem; }
.grid-services { grid-template-columns: 1fr; }
/* Ajuste da seção de licitações */
div[style*="grid-column: span 2"] { grid-column: span 1 !important; }
div[style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important; }
/* Ajuste do cabeçalho de seção com ícone */
div[style*="display: flex; align-items: center; gap: 20px"] {
flex-direction: column;
text-align: center;
}
.alert-faturamento { flex-direction: column; text-align: center; }
.agente-highlight { padding: 25px; align-items: center; text-align: center; }
.selos-display { flex-direction: column; width: 100%; }
/* Cursos header */
div[style*="justify-content: space-between; align-items: flex-end"] {
flex-direction: column;
align-items: center;
text-align: center;
gap: 20px;
}
/* Nav Mobile */
.nav-larinster { top: 0; position: relative; }
.nav-container { gap: 10px; flex-wrap: wrap; }
.nav-container a { font-size: 0.75rem; padding: 10px 5px; }
}
@media (max-width: 480px) {
.logo-img { height: 60px; }
.stat-card { padding: 20px; }
.stat-number { font-size: 1.8rem; }
.section-padding { padding: 40px 0; }
}
</style>
</head>
<body>
<div class="top-bar" style="background: var(--sebrae-blue); color: white; padding: 6px 0; font-size: 0.7rem; font-family: 'Montserrat', sans-serif;">
<div class="container" style="display: flex; justify-content: flex-end; align-items: center; padding: 0 20px;">
<div style="display: flex; align-items: center; gap: 8px;">
<div class="status-dot"></div>
<span style="letter-spacing: 0.5px; text-transform: uppercase; font-weight: 500;">Conexão Ativa: <strong style="color: #00ff88;">Sistema Larinster</strong></span>
</div>
</div>
</div>
<header class="main-header">
<div class="container header-grid">
<div class="header-left">
<div class="authority-badge">
<p class="label-small">Município de</p>
<p class="city-name">HORIZONTE</p>
<p class="state-name">ESTADO DO CEARÁ</p>
</div>
</div>
<div class="header-center">
<a>
<img src="https://empreenderhorizonte.com/wp-content/uploads/2025/02/Logo-2.0.2-Sala-Do-Empreendedor-Horizonte-300x160.png" class="logo-main" alt="Logo Sala do Empreendedor Horizonte">
</a>
</div>
<div class="header-right">
<div class="transparency-info">
<p>PORTAL DA TRANSPARÊNCIA</p>
<p class="highlight">REFERÊNCIA EM DESENVOLVIMENTO</p>
</div>
</div>
</div>
</header>
<nav class="nav-larinster">
<div class="container">
<ul class="nav-container">
<li><a href="./"><i class="fas fa-home"></i> Inicio</a></li>
<li><a href="../estrutura/" class="active"><i class="fas fa-building"></i> Estrutura</a></li>
<li><a href="../EmpreendedorDigital/"><i class="fas fa-envelope"></i> Contato</a></li>
</ul>
</div>
</nav>
<style>
/* Estrutura Base (Desktop) */
.main-header {
border-bottom: 4px solid var(--sebrae-yellow);
background: white;
padding: 15px 0;
}
.header-grid {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 20px;
}
.authority-badge { border-left: 3px solid var(--sebrae-yellow); padding-left: 15px; }
.label-small { margin: 0; font-size: 0.65rem; color: var(--text-light); text-transform: uppercase; letter-spacing: 1px; }
.city-name { margin: 0; font-size: 1.3rem; font-weight: 900; color: var(--horizonte-blue); line-height: 1; }
.state-name { margin: 0; font-size: 0.6rem; color: var(--sebrae-blue); font-weight: 700; }
.logo-main { max-height: 85px; width: auto; display: block; margin: 0 auto; }
.transparency-info { text-align: right; color: var(--text-light); font-size: 0.65rem; font-weight: 600; }
.transparency-info .highlight { color: var(--sebrae-blue); margin: 0; text-transform: uppercase; }
.status-dot { width: 7px; height: 7px; background: #00ff88; border-radius: 50%; box-shadow: 0 0 10px #00ff88; animation: pulse 2s infinite; }
@keyframes pulse {
0% { opacity: 1; transform: scale(1); }
50% { opacity: 0.4; transform: scale(1.1); }
100% { opacity: 1; transform: scale(1); }
}
/* RESPONSIVIDADE (Ajuste solicitado) */
@media (max-width: 768px) {
.header-grid {
grid-template-columns: 1fr; /* Apenas uma coluna para a logo */
padding: 10px 0;
}
/* OCULTA as laterais no mobile */
.header-left, .header-right {
display: none !important;
}
.logo-main {
max-height: 70px; /* Reduz um pouco a logo no celular para ganhar espaço */
}
.top-bar .container {
justify-content: center; /* Centraliza o status do sistema no celular */
}
}
</style>
<main class="container section-padding">
<p style="text-align: center; color: var(--text-light); border: 2px dashed #ddd; padding: 40px; border-radius: 15px;">
ESPAÇO RESERVADO PARA CONTEÚDOS DINÂMICOS - NÃO UTILIZAR SEM PERMISSÃO
</p>
</main>
<footer>
<div class="container">
<div class="footer-logos">
<img src="https://empreenderhorizonte.com/wp-content/uploads/2025/02/logo-horioznte-2025-1536x390-1-300x76.png" alt="Prefeitura de Horizonte">
<img src="https://empreenderhorizonte.com/wp-content/uploads/2025/02/sebrae-logo-1-1024x554-1-300x162.png" alt="Sebrae">
<img src="https://empreenderhorizonte.com/wp-content/uploads/2025/02/Logo-2.0.2-Sala-Do-Empreendedor-Horizonte-300x160.png"
alt="Sala do Empreendedor"
style="display: block; max-width: 150px; width: 100%; height: auto; transition: transform 0.3s ease; cursor: pointer;"
onmouseover="this.style.transform='scale(1.05)';"
onmouseout="this.style.transform='scale(1)';"
>
</div>
<div class="footer-grid">
<div>
<h4 style="color: var(--sebrae-yellow); margin-bottom: 20px;">Localização</h4>
<p>Centro Administrativo Domingão</p>
<p>Rua Baturité, 770 - Planalto Horizonte</p>
<p>Horizonte - CE, CEP: 62880-000</p>
</div>
<div>
<h4 style="color: var(--sebrae-yellow); margin-bottom: 20px;">Atendimento</h4>
<p>Segunda a Sexta-feira</p>
<p>08:00h às 11:00h | 14:00h às 16:00h</p>
</div>
<div style="display: flex; flex-direction: column; gap: 15px;">
<h4 style="color: var(--sebrae-yellow); margin-bottom: 5px; font-size: 1.1rem; text-transform: uppercase; letter-spacing: 1px;">Siga nossas redes</h4>
<div style="display: flex; gap: 12px; align-items: center;">
<a href="https://instagram.com/empreenderhorizonte" target="_blank" style="background: linear-gradient(45deg, #f09433, #dc2743, #bc1888); color: white; width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; text-decoration: none; transition: 0.3s;" onmouseover="this.style.transform='translateY(-5px)'" onmouseout="this.style.transform='translateY(0)'"><i class="fab fa-instagram"></i></a>
<a href="https://wa.me/5585985662043" target="_blank" style="background: #25D366; color: white; width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; text-decoration: none; transition: 0.3s;" onmouseover="this.style.transform='translateY(-5px)'" onmouseout="this.style.transform='translateY(0)'"><i class="fab fa-whatsapp"></i></a>
<a href="https://facebook.com/empreenderhorizonte" target="_blank" style="background: #1877F2; color: white; width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; text-decoration: none; transition: 0.3s;" onmouseover="this.style.transform='translateY(-5px)'" onmouseout="this.style.transform='translateY(0)'"><i class="fab fa-facebook-f"></i></a>
</div>
</div>
</div>
<style>
.larinster-tag {
text-align: center;
padding: 25px;
font-family: 'Inter', sans-serif;
font-size: 0.65rem;
letter-spacing: 2px;
color: #94a3b8;
font-weight: 700;
text-transform: uppercase;
}
.lnsr-dot { color: #10b981; margin-right: 5px; animation: blink 2s infinite; }
.lnsr-legal-links { margin-bottom: 10px; display: block; }
.lnsr-legal-links a { color: #94a3b8; text-decoration: none; margin: 0 10px; transition: 0.3s; }
.lnsr-legal-links a:hover { color: var(--sebrae-yellow); }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
</style>
<div class="larinster-tag">
<div class="lnsr-legal-links">
<a href="termos.php">Termos de Uso</a>
<span style="opacity: 0.3;">|</span>
<a href="privacidade.php">Privacidade</a>
</div>
<div style="margin-bottom: 10px;">
© 2026 <strong>Sala do Empreendedor de Horizonte</strong> | Todos os direitos reservados
</div>
<div>
<i class="fas fa-circle lnsr-dot"></i>
Arquitetura de Dados e Conectividade: <strong>Tecnologia Larinster</strong>
</div>
</div>
</div>
</footer>
<script>
// Sistema Larinster: Animação de Dados e Interatividade
function animarNumerosLarinster() {
const stats = [
{ id: 'lnsr_total_atendimentos', final: 0 },
{ id: 'lnsr_mei_ativos', final: 0 },
{ id: 'lnsr_capacitacoes', final: 0 },
{ id: 'lnsr_satisfacao', final: 0, sufixo: '%' }
];
stats.forEach(stat => {
const elemento = document.getElementById(stat.id);
if (!elemento) return;
let inicio = 0;
const duracao = 2000;
const incremento = stat.final / (duracao / 16);
const atualizar = () => {
inicio += incremento;
if (inicio < stat.final) {
elemento.innerText = Math.floor(inicio).toLocaleString('pt-BR') + (stat.sufixo || '');
requestAnimationFrame(atualizar);
} else {
elemento.innerText = stat.final.toLocaleString('pt-BR') + (stat.sufixo || '');
}
};
atualizar();
});
}
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
animarNumerosLarinster();
observer.unobserve(entry.target);
}
});
}, { threshold: 0.5 });
document.querySelectorAll('.stats-container').forEach(section => observer.observe(section));
</script>
</body>
</html>
GEMINI
24/02/2026 às 01:08
Larinster
Prompted pode mandar o código completo e atualizado por favor:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sala do Empreendedor | Horizonte - CE</title>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;800&family=Open+Sans:wght@400;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<style>
:root {
--sebrae-blue: #0054A6;
--sebrae-yellow: #FFCB05;
--horizonte-blue: #003399;
--horizonte-light: #E6F0FF;
--text-dark: #333333;
--text-light: #666666;
--white: #FFFFFF;
--gold: #D4AF37;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body { background-color: #F4F7F9; color: var(--text-dark); font-family: 'Open Sans', sans-serif; line-height: 1.6; }
h1, h2, h3, h4, .font-alt { font-family: 'Montserrat', sans-serif; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
/* BARRA SUPERIOR INSTITUCIONAL */
.top-bar { background: var(--sebrae-blue); color: white; padding: 8px 0; font-size: 0.8rem; }
.top-flex { display: flex; justify-content: space-between; align-items: center; }
/* HEADER */
header { background: var(--white); padding: 20px 0; box-shadow: 0 4px 10px rgba(0,0,0,0.05); position: sticky; top: 0; z-index: 1000; }
.header-flex { display: flex; justify-content: space-between; align-items: center; }
.logo-group { display: flex; align-items: center; gap: 20px; }
.logo-img { height: 75px; width: auto; }
/* HERO SECTION */
.hero { background: linear-gradient(135deg, var(--sebrae-blue) 0%, var(--horizonte-blue) 100%); color: white; padding: 80px 0 120px; text-align: center; position: relative; overflow: hidden; }
.hero::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 10px; background: var(--sebrae-yellow); }
.badge-ouro {
background: var(--sebrae-yellow); color: var(--sebrae-blue);
padding: 10px 25px; border-radius: 50px; font-weight: 800; font-size: 0.9rem;
display: inline-block; margin-bottom: 20px; box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
.hero h1 { font-size: 3rem; margin-bottom: 15px; text-shadow: 2px 2px 4px rgba(0,0,0,0.3); }
.frase-inspira { font-style: italic; font-size: 1.3rem; color: var(--horizonte-light); font-weight: 300; }
/* SEÇÃO ESTATÍSTICAS */
.stats-container { margin-top: -60px; position: relative; z-index: 20; }
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; }
.stat-card {
background: white; padding: 30px; border-radius: 15px; text-align: center;
box-shadow: 0 10px 30px rgba(0,0,0,0.1); border-bottom: 4px solid var(--sebrae-yellow);
}
.stat-number { display: block; font-size: 2.2rem; font-weight: 800; color: var(--sebrae-blue); font-family: 'Montserrat'; }
.stat-label { font-size: 0.8rem; color: var(--text-light); text-transform: uppercase; font-weight: 600; letter-spacing: 1px; }
/* CARDS DE SERVIÇOS */
.section-padding { padding: 80px 0; }
.grid-services { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 25px; margin-top: 40px; }
.card-service { background: white; padding: 30px; border-radius: 12px; border-bottom: 5px solid var(--sebrae-blue); transition: 0.3s; box-shadow: 0 5px 15px rgba(0,0,0,0.05); }
.card-service:hover { transform: translateY(-10px); box-shadow: 0 10px 25px rgba(0,0,0,0.1); }
.card-service h3 { color: var(--sebrae-blue); margin-bottom: 15px; }
/* AGENTE E SELOS */
.info-split { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.agente-highlight { background: var(--horizonte-light); padding: 40px; border-radius: 20px; border-left: 10px solid var(--sebrae-blue); display: flex; flex-direction: column; gap: 20px; }
.selos-display { display: flex; gap: 20px; margin-top: 10px; }
.selo-item { background: white; padding: 15px; border-radius: 10px; text-align: center; flex: 1; border: 1px solid #ddd; }
/* FOTOS */
.foto-container { width: 100%; height: 320px; border-radius: 15px; overflow: hidden; box-shadow: 0 5px 15px rgba(0,0,0,0.1); margin-bottom: 20px; background: #eee; }
.foto-container img { width: 100%; height: 100%; display: block; object-fit: cover; }
.foto-agente {
width: 160px;
height: 160px;
border-radius: 50%;
border: 5px solid var(--white);
margin-bottom: 15px;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
overflow: hidden;
}
.foto-agente img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* ALERTAS */
.alert-faturamento { background: #FFF9E6; border: 2px solid var(--sebrae-yellow); padding: 30px; border-radius: 15px; margin-top: 50px; display: flex; align-items: center; gap: 20px; }
/* FOOTER */
footer { background: #1A1A1A; color: white; padding: 80px 0 20px; }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 40px; margin-bottom: 50px; }
.footer-logos { display: flex; justify-content: center; align-items: center; gap: 40px; background: white; padding: 30px; border-radius: 15px; margin-bottom: 60px; flex-wrap: wrap; }
.footer-logos img { height: 55px; width: auto; object-fit: contain; }
.larinster-tag { text-align: center; font-size: 0.75rem; color: #888; border-top: 1px solid #333; padding-top: 20px; letter-spacing: 2px; }
.parceiros-container { display: flex; justify-content: space-around; align-items: center; flex-wrap: wrap; gap: 40px; filter: grayscale(100%); opacity: 0.6; transition: 0.5s; }
.parceiros-container:hover { filter: grayscale(0%); opacity: 1; }
/* --- NOVAS REGRAS DE RESPONSIVIDADE --- */
@media (max-width: 992px) {
.hero h1 { font-size: 2.2rem; }
.info-split { grid-template-columns: 1fr; }
.grid-services { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
.header-flex { flex-direction: column; text-align: center; gap: 15px; }
header div[style*="text-align: right"] { text-align: center !important; }
.top-flex { flex-direction: column; gap: 5px; text-align: center; }
.hero { padding: 60px 0 100px; }
.hero h1 { font-size: 1.8rem; }
.frase-inspira { font-size: 1.1rem; }
.grid-services { grid-template-columns: 1fr; }
/* Ajuste da seção de licitações */
div[style*="grid-column: span 2"] { grid-column: span 1 !important; }
div[style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important; }
/* Ajuste do cabeçalho de seção com ícone */
div[style*="display: flex; align-items: center; gap: 20px"] {
flex-direction: column;
text-align: center;
}
.alert-faturamento { flex-direction: column; text-align: center; }
.agente-highlight { padding: 25px; align-items: center; text-align: center; }
.selos-display { flex-direction: column; width: 100%; }
/* Cursos header */
div[style*="justify-content: space-between; align-items: flex-end"] {
flex-direction: column;
align-items: center;
text-align: center;
gap: 20px;
}
}
@media (max-width: 480px) {
.logo-img { height: 60px; }
.stat-card { padding: 20px; }
.stat-number { font-size: 1.8rem; }
.section-padding { padding: 40px 0; }
}
</style>
</head>
<body>
<div class="top-bar" style="background: var(--sebrae-blue); color: white; padding: 6px 0; font-size: 0.7rem; font-family: 'Montserrat', sans-serif;">
<div class="container" style="display: flex; justify-content: flex-end; align-items: center; padding: 0 20px;">
<div style="display: flex; align-items: center; gap: 8px;">
<div class="status-dot"></div>
<span style="letter-spacing: 0.5px; text-transform: uppercase; font-weight: 500;">Conexão Ativa: <strong style="color: #00ff88;">Sistema Larinster</strong></span>
</div>
</div>
</div>
<header class="main-header">
<div class="container header-grid">
<div class="header-left">
<div class="authority-badge">
<p class="label-small">Município de</p>
<p class="city-name">HORIZONTE</p>
<p class="state-name">ESTADO DO CEARÁ</p>
</div>
</div>
<div class="header-center">
<a href="index.php">
<img src="https://empreenderhorizonte.com/wp-content/uploads/2025/02/Logo-2.0.2-Sala-Do-Empreendedor-Horizonte-300x160.png" class="logo-main" alt="Logo Sala do Empreendedor Horizonte">
</a>
</div>
<div class="header-right">
<div class="transparency-info">
<p>PORTAL DA TRANSPARÊNCIA</p>
<p class="highlight">REFERÊNCIA EM DESENVOLVIMENTO</p>
</div>
</div>
</div>
</header>
<style>
/* Estrutura Base (Desktop) */
.main-header {
border-bottom: 4px solid var(--sebrae-yellow);
background: white;
padding: 15px 0;
}
.header-grid {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 20px;
}
.authority-badge { border-left: 3px solid var(--sebrae-yellow); padding-left: 15px; }
.label-small { margin: 0; font-size: 0.65rem; color: var(--text-light); text-transform: uppercase; letter-spacing: 1px; }
.city-name { margin: 0; font-size: 1.3rem; font-weight: 900; color: var(--horizonte-blue); line-height: 1; }
.state-name { margin: 0; font-size: 0.6rem; color: var(--sebrae-blue); font-weight: 700; }
.logo-main { max-height: 85px; width: auto; display: block; margin: 0 auto; }
.transparency-info { text-align: right; color: var(--text-light); font-size: 0.65rem; font-weight: 600; }
.transparency-info .highlight { color: var(--sebrae-blue); margin: 0; text-transform: uppercase; }
.status-dot { width: 7px; height: 7px; background: #00ff88; border-radius: 50%; box-shadow: 0 0 10px #00ff88; animation: pulse 2s infinite; }
@keyframes pulse {
0% { opacity: 1; transform: scale(1); }
50% { opacity: 0.4; transform: scale(1.1); }
100% { opacity: 1; transform: scale(1); }
}
/* RESPONSIVIDADE (Ajuste solicitado) */
@media (max-width: 768px) {
.header-grid {
grid-template-columns: 1fr; /* Apenas uma coluna para a logo */
padding: 10px 0;
}
/* OCULTA as laterais no mobile */
.header-left, .header-right {
display: none !important;
}
.logo-main {
max-height: 70px; /* Reduz um pouco a logo no celular para ganhar espaço */
}
.top-bar .container {
justify-content: center; /* Centraliza o status do sistema no celular */
}
}
</style>
<!-- CAMPO RESPONSÁVEL PARA CONTEÚDOS -->
<p> ESPAÇO RESERVADO NÃO UTILIZAR SEM PERMISSÃO </p>
<footer>
<div class="container">
<div class="footer-logos">
<img src="https://empreenderhorizonte.com/wp-content/uploads/2025/02/logo-horioznte-2025-1536x390-1-300x76.png" alt="Prefeitura de Horizonte">
<img src="https://empreenderhorizonte.com/wp-content/uploads/2025/02/sebrae-logo-1-1024x554-1-300x162.png" alt="Sebrae">
<img src="https://empreenderhorizonte.com/wp-content/uploads/2025/02/Logo-2.0.2-Sala-Do-Empreendedor-Horizonte-300x160.png"
alt="Sala do Empreendedor"
style="display: block;
max-width: 150px; /* Aumentei de 300px para 450px */
width: 100%;
height: auto;
transition: transform 0.3s ease;
cursor: pointer;"
onmouseover="this.style.transform='scale(1.05)';"
onmouseout="this.style.transform='scale(1)';"
>
</div>
<div class="footer-grid">
<div>
<h4 style="color: var(--sebrae-yellow); margin-bottom: 20px;">Localização</h4>
<p>Centro Administrativo Domingão</p>
<p>Rua Baturité, 770 - Planalto Horizonte</p>
<p>Horizonte - CE, CEP: 62880-000</p>
</div>
<div>
<h4 style="color: var(--sebrae-yellow); margin-bottom: 20px;">Atendimento</h4>
<p>Segunda a Sexta-feira</p>
<p>08:00h às 11:00h | 14:00h às 16:00h</p>
</div>
<div style="display: flex; flex-direction: column; gap: 15px;">
<h4 style="color: var(--sebrae-yellow); margin-bottom: 5px; font-size: 1.1rem; text-transform: uppercase; letter-spacing: 1px;">Siga nossas redes</h4>
<div style="display: flex; gap: 12px; align-items: center;">
<a href="https://instagram.com/empreenderhorizonte" target="_blank" title="Instagram"
style="background: linear-gradient(45deg, #f09433, #dc2743, #bc1888); color: white; width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; text-decoration: none; transition: all 0.3s ease;"
onmouseover="this.style.transform='translateY(-5px)'; this.style.boxShadow='0 5px 15px rgba(188,24,136,0.4)'"
onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='none'">
<i class="fab fa-instagram" style="font-size: 1.4rem;"></i>
</a>
<a href="https://wa.me/5585985662043" target="_blank" title="WhatsApp"
style="background: #25D366; color: white; width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; text-decoration: none; transition: all 0.3s ease;"
onmouseover="this.style.transform='translateY(-5px)'; this.style.boxShadow='0 5px 15px rgba(37,211,102,0.4)'"
onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='none'">
<i class="fab fa-whatsapp" style="font-size: 1.4rem;"></i>
</a>
<a href="https://facebook.com/empreenderhorizonte" target="_blank" title="Facebook"
style="background: #1877F2; color: white; width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; text-decoration: none; transition: all 0.3s ease;"
onmouseover="this.style.transform='translateY(-5px)'; this.style.boxShadow='0 5px 15px rgba(24,119,242,0.4)'"
onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='none'">
<i class="fab fa-facebook-f" style="font-size: 1.3rem;"></i>
</a>
<a href="https://g.co/kgs/zqWh24V" target="_blank" title="Google Meu Negócio"
style="background: white; color: #4285F4; width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; text-decoration: none; transition: all 0.3s ease; border: 1px solid #ddd;"
onmouseover="this.style.transform='translateY(-5px)'; this.style.boxShadow='0 5px 15px rgba(0,0,0,0.1)'"
onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='none'">
<i class="fab fa-google" style="font-size: 1.2rem;"></i>
</a>
</div>
</div>
</div>
<style>
.larinster-tag {
text-align: center;
padding: 25px;
font-family: 'Inter', sans-serif;
font-size: 0.65rem;
letter-spacing: 2px;
color: #94a3b8;
font-weight: 700;
text-transform: uppercase;
}
.lnsr-dot { color: #10b981; margin-right: 5px; animation: blink 2s infinite; }
.lnsr-legal-links { margin-bottom: 10px; display: block; }
.lnsr-legal-links a {
color: #94a3b8;
text-decoration: none;
margin: 0 10px;
transition: color 0.3s;
}
.lnsr-legal-links a:hover { color: var(--sebrae-yellow); }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
</style>
<div class="larinster-tag">
<div class="lnsr-legal-links">
<a href="termos.php">Termos de Uso</a>
<span style="opacity: 0.3;">|</span>
<a href="privacidade.php">Privacidade</a>
</div>
<div style="margin-bottom: 10px;">
© 2026 <strong>Sala do Empreendedor de Horizonte</strong> | Todos os direitos reservados
</div>
<div>
<i class="fas fa-circle lnsr-dot"></i>
Arquitetura de Dados e Conectividade: <strong>Tecnologia Larinster</strong>
</div>
</div>
</div>
</footer>
<script>
function animarNumerosLarinster() {
const stats = [
{ id: 'lnsr_total_atendimentos', final: 0 },
{ id: 'lnsr_mei_ativos', final: 0 },
{ id: 'lnsr_capacitacoes', final: 0 },
{ id: 'lnsr_satisfacao', final: 0, sufixo: '%' }
];
stats.forEach(stat => {
const elemento = document.getElementById(stat.id);
if (!elemento) return;
let inicio = 0;
const duracao = 2000; // 2 segundos de animação
const incremento = stat.final / (duracao / 16); // 60fps aprox.
const atualizar = () => {
inicio += incremento;
if (inicio < stat.final) {
// Formata com ponto para milhares se for maior que 999
let valorFormatado = Math.floor(inicio).toLocaleString('pt-BR');
elemento.innerText = valorFormatado + (stat.sufixo || '');
requestAnimationFrame(atualizar);
} else {
elemento.innerText = stat.final.toLocaleString('pt-BR') + (stat.sufixo || '');
}
};
atualizar();
});
}
// Disparar a animação quando a seção estiver visível na tela
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
animarNumerosLarinster();
observer.unobserve(entry.target); // Anima apenas uma vez
}
});
}, { threshold: 0.5 });
document.querySelectorAll('.stats-container').forEach(section => {
observer.observe(section);
});
</script>
</body>
</html>
GEMINI
24/02/2026 às 01:08
Larinster
Prompted Preciso que adiciona o menu sem modificar, remover, alterar o codigo original desta página:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sala do Empreendedor | Horizonte - CE</title>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;800&family=Open+Sans:wght@400;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<style>
:root {
--sebrae-blue: #0054A6;
--sebrae-yellow: #FFCB05;
--horizonte-blue: #003399;
--horizonte-light: #E6F0FF;
--text-dark: #333333;
--text-light: #666666;
--white: #FFFFFF;
--gold: #D4AF37;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body { background-color: #F4F7F9; color: var(--text-dark); font-family: 'Open Sans', sans-serif; line-height: 1.6; }
h1, h2, h3, h4, .font-alt { font-family: 'Montserrat', sans-serif; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
/* BARRA SUPERIOR INSTITUCIONAL */
.top-bar { background: var(--sebrae-blue); color: white; padding: 8px 0; font-size: 0.8rem; }
.top-flex { display: flex; justify-content: space-between; align-items: center; }
/* HEADER */
header { background: var(--white); padding: 20px 0; box-shadow: 0 4px 10px rgba(0,0,0,0.05); position: sticky; top: 0; z-index: 1000; }
.header-flex { display: flex; justify-content: space-between; align-items: center; }
.logo-group { display: flex; align-items: center; gap: 20px; }
.logo-img { height: 75px; width: auto; }
/* HERO SECTION */
.hero { background: linear-gradient(135deg, var(--sebrae-blue) 0%, var(--horizonte-blue) 100%); color: white; padding: 80px 0 120px; text-align: center; position: relative; overflow: hidden; }
.hero::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 10px; background: var(--sebrae-yellow); }
.badge-ouro {
background: var(--sebrae-yellow); color: var(--sebrae-blue);
padding: 10px 25px; border-radius: 50px; font-weight: 800; font-size: 0.9rem;
display: inline-block; margin-bottom: 20px; box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
.hero h1 { font-size: 3rem; margin-bottom: 15px; text-shadow: 2px 2px 4px rgba(0,0,0,0.3); }
.frase-inspira { font-style: italic; font-size: 1.3rem; color: var(--horizonte-light); font-weight: 300; }
/* SEÇÃO ESTATÍSTICAS */
.stats-container { margin-top: -60px; position: relative; z-index: 20; }
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; }
.stat-card {
background: white; padding: 30px; border-radius: 15px; text-align: center;
box-shadow: 0 10px 30px rgba(0,0,0,0.1); border-bottom: 4px solid var(--sebrae-yellow);
}
.stat-number { display: block; font-size: 2.2rem; font-weight: 800; color: var(--sebrae-blue); font-family: 'Montserrat'; }
.stat-label { font-size: 0.8rem; color: var(--text-light); text-transform: uppercase; font-weight: 600; letter-spacing: 1px; }
/* CARDS DE SERVIÇOS */
.section-padding { padding: 80px 0; }
.grid-services { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 25px; margin-top: 40px; }
.card-service { background: white; padding: 30px; border-radius: 12px; border-bottom: 5px solid var(--sebrae-blue); transition: 0.3s; box-shadow: 0 5px 15px rgba(0,0,0,0.05); }
.card-service:hover { transform: translateY(-10px); box-shadow: 0 10px 25px rgba(0,0,0,0.1); }
.card-service h3 { color: var(--sebrae-blue); margin-bottom: 15px; }
/* AGENTE E SELOS */
.info-split { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.agente-highlight { background: var(--horizonte-light); padding: 40px; border-radius: 20px; border-left: 10px solid var(--sebrae-blue); display: flex; flex-direction: column; gap: 20px; }
.selos-display { display: flex; gap: 20px; margin-top: 10px; }
.selo-item { background: white; padding: 15px; border-radius: 10px; text-align: center; flex: 1; border: 1px solid #ddd; }
/* FOTOS */
.foto-container { width: 100%; height: 320px; border-radius: 15px; overflow: hidden; box-shadow: 0 5px 15px rgba(0,0,0,0.1); margin-bottom: 20px; background: #eee; }
.foto-container img { width: 100%; height: 100%; display: block; object-fit: cover; }
.foto-agente {
width: 160px;
height: 160px;
border-radius: 50%;
border: 5px solid var(--white);
margin-bottom: 15px;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
overflow: hidden;
}
.foto-agente img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* ALERTAS */
.alert-faturamento { background: #FFF9E6; border: 2px solid var(--sebrae-yellow); padding: 30px; border-radius: 15px; margin-top: 50px; display: flex; align-items: center; gap: 20px; }
/* FOOTER */
footer { background: #1A1A1A; color: white; padding: 80px 0 20px; }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 40px; margin-bottom: 50px; }
.footer-logos { display: flex; justify-content: center; align-items: center; gap: 40px; background: white; padding: 30px; border-radius: 15px; margin-bottom: 60px; flex-wrap: wrap; }
.footer-logos img { height: 55px; width: auto; object-fit: contain; }
.larinster-tag { text-align: center; font-size: 0.75rem; color: #888; border-top: 1px solid #333; padding-top: 20px; letter-spacing: 2px; }
.parceiros-container { display: flex; justify-content: space-around; align-items: center; flex-wrap: wrap; gap: 40px; filter: grayscale(100%); opacity: 0.6; transition: 0.5s; }
.parceiros-container:hover { filter: grayscale(0%); opacity: 1; }
/* --- NOVAS REGRAS DE RESPONSIVIDADE --- */
@media (max-width: 992px) {
.hero h1 { font-size: 2.2rem; }
.info-split { grid-template-columns: 1fr; }
.grid-services { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
.header-flex { flex-direction: column; text-align: center; gap: 15px; }
header div[style*="text-align: right"] { text-align: center !important; }
.top-flex { flex-direction: column; gap: 5px; text-align: center; }
.hero { padding: 60px 0 100px; }
.hero h1 { font-size: 1.8rem; }
.frase-inspira { font-size: 1.1rem; }
.grid-services { grid-template-columns: 1fr; }
/* Ajuste da seção de licitações */
div[style*="grid-column: span 2"] { grid-column: span 1 !important; }
div[style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important; }
/* Ajuste do cabeçalho de seção com ícone */
div[style*="display: flex; align-items: center; gap: 20px"] {
flex-direction: column;
text-align: center;
}
.alert-faturamento { flex-direction: column; text-align: center; }
.agente-highlight { padding: 25px; align-items: center; text-align: center; }
.selos-display { flex-direction: column; width: 100%; }
/* Cursos header */
div[style*="justify-content: space-between; align-items: flex-end"] {
flex-direction: column;
align-items: center;
text-align: center;
gap: 20px;
}
}
@media (max-width: 480px) {
.logo-img { height: 60px; }
.stat-card { padding: 20px; }
.stat-number { font-size: 1.8rem; }
.section-padding { padding: 40px 0; }
}
</style>
</head>
<body>
<div class="top-bar" style="background: var(--sebrae-blue); color: white; padding: 6px 0; font-size: 0.7rem; font-family: 'Montserrat', sans-serif;">
<div class="container" style="display: flex; justify-content: flex-end; align-items: center; padding: 0 20px;">
<div style="display: flex; align-items: center; gap: 8px;">
<div class="status-dot"></div>
<span style="letter-spacing: 0.5px; text-transform: uppercase; font-weight: 500;">Conexão Ativa: <strong style="color: #00ff88;">Sistema Larinster</strong></span>
</div>
</div>
</div>
<header class="main-header">
<div class="container header-grid">
<div class="header-left">
<div class="authority-badge">
<p class="label-small">Município de</p>
<p class="city-name">HORIZONTE</p>
<p class="state-name">ESTADO DO CEARÁ</p>
</div>
</div>
<div class="header-center">
<a href="index.php">
<img src="https://empreenderhorizonte.com/wp-content/uploads/2025/02/Logo-2.0.2-Sala-Do-Empreendedor-Horizonte-300x160.png" class="logo-main" alt="Logo Sala do Empreendedor Horizonte">
</a>
</div>
<div class="header-right">
<div class="transparency-info">
<p>PORTAL DA TRANSPARÊNCIA</p>
<p class="highlight">REFERÊNCIA EM DESENVOLVIMENTO</p>
</div>
</div>
</div>
</header>
<style>
/* Estrutura Base (Desktop) */
.main-header {
border-bottom: 4px solid var(--sebrae-yellow);
background: white;
padding: 15px 0;
}
.header-grid {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 20px;
}
.authority-badge { border-left: 3px solid var(--sebrae-yellow); padding-left: 15px; }
.label-small { margin: 0; font-size: 0.65rem; color: var(--text-light); text-transform: uppercase; letter-spacing: 1px; }
.city-name { margin: 0; font-size: 1.3rem; font-weight: 900; color: var(--horizonte-blue); line-height: 1; }
.state-name { margin: 0; font-size: 0.6rem; color: var(--sebrae-blue); font-weight: 700; }
.logo-main { max-height: 85px; width: auto; display: block; margin: 0 auto; }
.transparency-info { text-align: right; color: var(--text-light); font-size: 0.65rem; font-weight: 600; }
.transparency-info .highlight { color: var(--sebrae-blue); margin: 0; text-transform: uppercase; }
.status-dot { width: 7px; height: 7px; background: #00ff88; border-radius: 50%; box-shadow: 0 0 10px #00ff88; animation: pulse 2s infinite; }
@keyframes pulse {
0% { opacity: 1; transform: scale(1); }
50% { opacity: 0.4; transform: scale(1.1); }
100% { opacity: 1; transform: scale(1); }
}
/* RESPONSIVIDADE (Ajuste solicitado) */
@media (max-width: 768px) {
.header-grid {
grid-template-columns: 1fr; /* Apenas uma coluna para a logo */
padding: 10px 0;
}
/* OCULTA as laterais no mobile */
.header-left, .header-right {
display: none !important;
}
.logo-main {
max-height: 70px; /* Reduz um pouco a logo no celular para ganhar espaço */
}
.top-bar .container {
justify-content: center; /* Centraliza o status do sistema no celular */
}
}
</style>
<!-- CAMPO RESPONSÁVEL PARA CONTEÚDOS -->
<p> ESPAÇO RESERVADO NÃO UTILIZAR SEM PERMISSÃO </p>
<footer>
<div class="container">
<div class="footer-logos">
<img src="https://empreenderhorizonte.com/wp-content/uploads/2025/02/logo-horioznte-2025-1536x390-1-300x76.png" alt="Prefeitura de Horizonte">
<img src="https://empreenderhorizonte.com/wp-content/uploads/2025/02/sebrae-logo-1-1024x554-1-300x162.png" alt="Sebrae">
<img src="https://empreenderhorizonte.com/wp-content/uploads/2025/02/Logo-2.0.2-Sala-Do-Empreendedor-Horizonte-300x160.png"
alt="Sala do Empreendedor"
style="display: block;
max-width: 150px; /* Aumentei de 300px para 450px */
width: 100%;
height: auto;
transition: transform 0.3s ease;
cursor: pointer;"
onmouseover="this.style.transform='scale(1.05)';"
onmouseout="this.style.transform='scale(1)';"
>
</div>
<div class="footer-grid">
<div>
<h4 style="color: var(--sebrae-yellow); margin-bottom: 20px;">Localização</h4>
<p>Centro Administrativo Domingão</p>
<p>Rua Baturité, 770 - Planalto Horizonte</p>
<p>Horizonte - CE, CEP: 62880-000</p>
</div>
<div>
<h4 style="color: var(--sebrae-yellow); margin-bottom: 20px;">Atendimento</h4>
<p>Segunda a Sexta-feira</p>
<p>08:00h às 11:00h | 14:00h às 16:00h</p>
</div>
<div style="display: flex; flex-direction: column; gap: 15px;">
<h4 style="color: var(--sebrae-yellow); margin-bottom: 5px; font-size: 1.1rem; text-transform: uppercase; letter-spacing: 1px;">Siga nossas redes</h4>
<div style="display: flex; gap: 12px; align-items: center;">
<a href="https://instagram.com/empreenderhorizonte" target="_blank" title="Instagram"
style="background: linear-gradient(45deg, #f09433, #dc2743, #bc1888); color: white; width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; text-decoration: none; transition: all 0.3s ease;"
onmouseover="this.style.transform='translateY(-5px)'; this.style.boxShadow='0 5px 15px rgba(188,24,136,0.4)'"
onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='none'">
<i class="fab fa-instagram" style="font-size: 1.4rem;"></i>
</a>
<a href="https://wa.me/5585985662043" target="_blank" title="WhatsApp"
style="background: #25D366; color: white; width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; text-decoration: none; transition: all 0.3s ease;"
onmouseover="this.style.transform='translateY(-5px)'; this.style.boxShadow='0 5px 15px rgba(37,211,102,0.4)'"
onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='none'">
<i class="fab fa-whatsapp" style="font-size: 1.4rem;"></i>
</a>
<a href="https://facebook.com/empreenderhorizonte" target="_blank" title="Facebook"
style="background: #1877F2; color: white; width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; text-decoration: none; transition: all 0.3s ease;"
onmouseover="this.style.transform='translateY(-5px)'; this.style.boxShadow='0 5px 15px rgba(24,119,242,0.4)'"
onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='none'">
<i class="fab fa-facebook-f" style="font-size: 1.3rem;"></i>
</a>
<a href="https://g.co/kgs/zqWh24V" target="_blank" title="Google Meu Negócio"
style="background: white; color: #4285F4; width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; text-decoration: none; transition: all 0.3s ease; border: 1px solid #ddd;"
onmouseover="this.style.transform='translateY(-5px)'; this.style.boxShadow='0 5px 15px rgba(0,0,0,0.1)'"
onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='none'">
<i class="fab fa-google" style="font-size: 1.2rem;"></i>
</a>
</div>
</div>
</div>
<style>
.larinster-tag {
text-align: center;
padding: 25px;
font-family: 'Inter', sans-serif;
font-size: 0.65rem;
letter-spacing: 2px;
color: #94a3b8;
font-weight: 700;
text-transform: uppercase;
}
.lnsr-dot { color: #10b981; margin-right: 5px; animation: blink 2s infinite; }
.lnsr-legal-links { margin-bottom: 10px; display: block; }
.lnsr-legal-links a {
color: #94a3b8;
text-decoration: none;
margin: 0 10px;
transition: color 0.3s;
}
.lnsr-legal-links a:hover { color: var(--sebrae-yellow); }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
</style>
<div class="larinster-tag">
<div class="lnsr-legal-links">
<a href="termos.php">Termos de Uso</a>
<span style="opacity: 0.3;">|</span>
<a href="privacidade.php">Privacidade</a>
</div>
<div style="margin-bottom: 10px;">
© 2026 <strong>Sala do Empreendedor de Horizonte</strong> | Todos os direitos reservados
</div>
<div>
<i class="fas fa-circle lnsr-dot"></i>
Arquitetura de Dados e Conectividade: <strong>Tecnologia Larinster</strong>
</div>
</div>
</div>
</footer>
<script>
function animarNumerosLarinster() {
const stats = [
{ id: 'lnsr_total_atendimentos', final: 0 },
{ id: 'lnsr_mei_ativos', final: 0 },
{ id: 'lnsr_capacitacoes', final: 0 },
{ id: 'lnsr_satisfacao', final: 0, sufixo: '%' }
];
stats.forEach(stat => {
const elemento = document.getElementById(stat.id);
if (!elemento) return;
let inicio = 0;
const duracao = 2000; // 2 segundos de animação
const incremento = stat.final / (duracao / 16); // 60fps aprox.
const atualizar = () => {
inicio += incremento;
if (inicio < stat.final) {
// Formata com ponto para milhares se for maior que 999
let valorFormatado = Math.floor(inicio).toLocaleString('pt-BR');
elemento.innerText = valorFormatado + (stat.sufixo || '');
requestAnimationFrame(atualizar);
} else {
elemento.innerText = stat.final.toLocaleString('pt-BR') + (stat.sufixo || '');
}
};
atualizar();
});
}
// Disparar a animação quando a seção estiver visível na tela
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
animarNumerosLarinster();
observer.unobserve(entry.target); // Anima apenas uma vez
}
});
}, { threshold: 0.5 });
document.querySelectorAll('.stats-container').forEach(section => {
observer.observe(section);
});
</script>
</body>
</html>
GEMINI
24/02/2026 às 01:08
Larinster
Prompted pode ajustar nesta página, seguindo o mesmo padrão da página anterior? A parte do script eu não adicionei aqui, pois não vou mexer neles:
<?php
/* ============================================================
LOGICA DE PROCESSAMENTO - ECOSSISTEMA LNSR
============================================================ */
// Verifica se é uma requisição POST (AJAX)
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
// Limpa qualquer saída anterior (previne erros de 'Sincronizando')
if (ob_get_length()) ob_clean();
header('Content-Type: application/json');
// Função auxiliar para Maiúsculas
if (!function_exists('up')) {
function up($str) { return mb_strtoupper((string)($str ?? ''), 'UTF-8'); }
}
$user_id = $_SESSION['usuario_id'] ?? 0;
$user_nome = $_SESSION['usuario_nome'] ?? 'SISTEMA';
// SITUAÇÃO A: NOVO CADASTRO + PROTOCOLO
if (isset($_POST['novo_cliente'])) {
try {
if (!$pdo->inTransaction()) $pdo->beginTransaction();
$cpf = $_POST['cpf'];
// 1. Insere na lnsr_clientes
$sqlCli = "INSERT INTO lnsr_clientes
(cpf, rg, nome_completo, data_nascimento, nome_mae, nome_pai, naturalidade, cep, logradouro, numero, bairro, cidade, estado, email, telefone, permite_acesso, nivel_acesso, criado_por_id, criado_em)
VALUES (:cpf, :rg, :nome, :nasc, :mae, :pai, :natu, :cep, :log, :num, :bai, :cid, :est, :email, :tel, 'SIM', 'CLIENTE', :operador, NOW())";
$stmtCli = $pdo->prepare($sqlCli);
$stmtCli->execute([
'cpf' => $cpf,
'rg' => up($_POST['rg']),
'nome' => up($_POST['nome_completo']),
'nasc' => $_POST['data_nascimento'] ?: null,
'mae' => up($_POST['nome_mae']),
'pai' => up($_POST['nome_pai']),
'natu' => up($_POST['naturalidade']),
'cep' => $_POST['cep'],
'log' => up($_POST['logradouro']),
'num' => up($_POST['numero']),
'bai' => up($_POST['bairro']),
'cid' => up($_POST['cidade']),
'est' => up($_POST['estado']),
'email' => strtolower($_POST['email']),
'tel' => $_POST['telefone'],
'operador' => $user_id
]);
$cliente_id = $pdo->lastInsertId();
// 2. Se tiver CNPJ, insere na lnsr_cnpjs
if (!empty($_POST['cnpj'])) {
$sqlCnpj = "INSERT INTO lnsr_cnpjs
(cnpj, razao_social, nome_fantasia, data_abertura, atividade_principal, logradouro_pj, numero_pj, complemento_pj, cep_pj, bairro_pj, municipio_pj, uf_pj, email_pj, telefone_pj, situacao_cadastral, data_situacao_cadastral, cpf_cliente, criado_em)
VALUES (:cnpj, :razao, :fantasia, :abertura, :atividade, :log_pj, :num_pj, :comp_pj, :cep_pj, :bai_pj, :mun_pj, :uf_pj, :email_pj, :tel_pj, :situacao, :dt_situacao, :cpf_cli, NOW())";
$stmtCnpj = $pdo->prepare($sqlCnpj);
$stmtCnpj->execute([
'cnpj' => $_POST['cnpj'],
'razao' => up($_POST['razao_social']),
'fantasia' => up($_POST['nome_fantasia']),
'abertura' => $_POST['data_abertura'] ?: null,
'atividade' => up($_POST['atividade_principal']),
'log_pj' => up($_POST['logradouro_pj']),
'num_pj' => up($_POST['numero_pj']),
'comp_pj' => up($_POST['complemento_pj']),
'cep_pj' => $_POST['cep_pj'],
'bai_pj' => up($_POST['bairro_pj']),
'mun_pj' => up($_POST['municipio_pj']),
'uf_pj' => up($_POST['uf_pj']),
'email_pj' => strtolower($_POST['email_pj']),
'tel_pj' => $_POST['telefone_pj'],
'situacao' => up($_POST['situacao_cadastral']),
'dt_situacao' => $_POST['data_situacao_cadastral'] ?: null,
'cpf_cli' => $cpf
]);
}
// 3. Gera Protocolo Inicial de Cadastro
$protocolo = "LNSR-REG-" . date('Ym') . "-" . strtoupper(substr(md5(uniqid()), 0, 6));
$stmtProt = $pdo->prepare("INSERT INTO lnsr_protocolos (protocolo, acao, registro_id, usuario, criado_em) VALUES (?, 'CADASTRO_CLIENTE', ?, ?, NOW())");
$stmtProt->execute([$protocolo, $cliente_id, $user_nome]);
$pdo->commit();
echo json_encode(['status' => 'success', 'protocolo' => $protocolo, 'msg' => 'Cadastro realizado com sucesso!']);
exit;
} catch (Exception $e) {
if ($pdo->inTransaction()) $pdo->rollBack();
echo json_encode(['status' => 'error', 'msg' => 'Erro ao cadastrar: ' . $e->getMessage()]);
exit;
}
}
// SITUAÇÃO B: CLIENTE EXISTENTE - APENAS TRIAGEM/PROTOCOLO
if (isset($_POST['assunto']) && !isset($_POST['novo_cliente'])) {
try {
$cpf = $_POST['cpf'];
$assunto = $_POST['assunto'];
$mensagem = $_POST['mensagem'] ?? 'Atendimento de Orientação';
$stmtBusca = $pdo->prepare("SELECT id FROM lnsr_clientes WHERE cpf = ?");
$stmtBusca->execute([$cpf]);
$cli = $stmtBusca->fetch();
if ($cli) {
$protocolo = "LNSR-SRV-" . date('Ym') . "-" . strtoupper(substr(md5(uniqid()), 0, 6));
$stmtProt = $pdo->prepare("INSERT INTO lnsr_protocolos (protocolo, acao, registro_id, usuario, observacao, criado_em) VALUES (?, ?, ?, ?, ?, NOW())");
$stmtProt->execute([$protocolo, $assunto, $cli['id'], $user_nome, $mensagem]);
echo json_encode(['status' => 'success', 'protocolo' => $protocolo, 'msg' => 'Protocolo gerado com sucesso!']);
} else {
echo json_encode(['status' => 'error', 'msg' => 'Erro: Cliente não localizado para este CPF.']);
}
exit;
} catch (Exception $e) {
echo json_encode(['status' => 'error', 'msg' => $e->getMessage()]);
exit;
}
}
}
?>
?>
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Identificação | Sala do Empreendedor Horizonte</title>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;800&family=Open+Sans:wght@400;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<style>
:root {
--sebrae-blue: #0054A6;
--sebrae-yellow: #FFCB05;
--horizonte-blue: #003399;
--horizonte-light: #E6F0FF;
--text-dark: #333333;
--text-light: #666666;
--white: #FFFFFF;
--gold: #D4AF37;
}
/* RESET E ESTRUTURA */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { background-color: #F4F7F9; color: var(--text-dark); font-family: 'Open Sans', sans-serif; line-height: 1.6; }
h1, h2, h3, h4 { font-family: 'Montserrat', sans-serif; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
/* HEADER E TOP BAR (SEU CÓDIGO) */
.top-bar { background: var(--sebrae-blue); color: white; padding: 6px 0; font-size: 0.7rem; font-family: 'Montserrat', sans-serif; }
.status-dot { width: 7px; height: 7px; background: #00ff88; border-radius: 50%; box-shadow: 0 0 10px #00ff88; animation: pulse 2s infinite; display: inline-block; margin-right: 5px; }
@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(1.1); } }
.main-header { border-bottom: 4px solid var(--sebrae-yellow); background: white; padding: 15px 0; position: sticky; top: 0; z-index: 1000; box-shadow: 0 4px 10px rgba(0,0,0,0.05); }
.header-grid { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; }
.authority-badge { border-left: 3px solid var(--sebrae-yellow); padding-left: 15px; }
.label-small { margin: 0; font-size: 0.65rem; color: var(--text-light); text-transform: uppercase; letter-spacing: 1px; }
.city-name { margin: 0; font-size: 1.3rem; font-weight: 900; color: var(--horizonte-blue); line-height: 1; }
.state-name { margin: 0; font-size: 0.6rem; color: var(--sebrae-blue); font-weight: 700; }
.logo-main { max-height: 85px; width: auto; display: block; margin: 0 auto; }
.transparency-info { text-align: right; color: var(--text-light); font-size: 0.65rem; font-weight: 600; }
.transparency-info .highlight { color: var(--sebrae-blue); margin: 0; text-transform: uppercase; }
/* HERO SECTION */
.hero { background: linear-gradient(135deg, var(--sebrae-blue) 0%, var(--horizonte-blue) 100%); color: white; padding: 80px 0 120px; text-align: center; position: relative; overflow: hidden; }
.hero::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 10px; background: var(--sebrae-yellow); }
.badge-ouro { background: var(--sebrae-yellow); color: var(--sebrae-blue); padding: 10px 25px; border-radius: 50px; font-weight: 800; font-size: 0.9rem; display: inline-block; margin-bottom: 20px; box-shadow: 0 4px 15px rgba(0,0,0,0.2); }
.hero h1 { font-size: 3rem; margin-bottom: 15px; text-shadow: 2px 2px 4px rgba(0,0,0,0.3); }
.frase-inspira { font-style: italic; font-size: 1.3rem; color: var(--horizonte-light); font-weight: 300; }
/* FORMULÁRIO (CONTEÚDO) */
.contact-card { background: white; padding: 40px; border-radius: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); max-width: 650px; margin: -60px auto 60px; position: relative; z-index: 30; }
.lnsr-input { width: 100%; padding: 14px; border-radius: 12px; border: 2px solid #eef2f6; transition: 0.3s; margin-bottom: 15px; font-size: 1rem; }
.lnsr-input:focus { border-color: var(--sebrae-blue); outline: none; }
.btn-submit { background: var(--sebrae-blue); color: white; width: 100%; padding: 18px; border-radius: 12px; border: none; font-weight: 800; cursor: pointer; text-transform: uppercase; }
/* FOOTER */
footer { background: #1A1A1A; color: white; padding: 80px 0 20px; }
.footer-logos { display: flex; justify-content: center; align-items: center; gap: 40px; background: white; padding: 30px; border-radius: 15px; margin-bottom: 60px; flex-wrap: wrap; }
.footer-logos img { height: 55px; width: auto; transition: 0.3s; }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 40px; margin-bottom: 50px; }
.larinster-tag { text-align: center; font-size: 0.65rem; color: #888; border-top: 1px solid #333; padding-top: 25px; letter-spacing: 2px; text-transform: uppercase; }
.lnsr-dot { color: #10b981; margin-right: 5px; animation: blink 2s infinite; }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
/* RESPONSIVIDADE HEADER */
@media (max-width: 768px) {
.header-grid { grid-template-columns: 1fr; }
.header-left, .header-right { display: none !important; }
.hero h1 { font-size: 1.8rem; }
.contact-card { margin: 20px 10px; padding: 25px; }
}
</style>
</head>
<body>
<div class="top-bar">
<div class="container" style="display: flex; justify-content: flex-end; align-items: center; padding: 0 20px;">
<div style="display: flex; align-items: center; gap: 8px;">
<div class="status-dot"></div>
<span style="letter-spacing: 0.5px; text-transform: uppercase; font-weight: 500;">Conexão Ativa: <strong style="color: #00ff88;">Sistema Larinster</strong></span>
</div>
</div>
</div>
<header class="main-header">
<div class="container header-grid">
<div class="header-left">
<div class="authority-badge">
<p class="label-small">Município de</p>
<p class="city-name">HORIZONTE</p>
<p class="state-name">ESTADO DO CEARÁ</p>
</div>
</div>
<div class="header-center">
<a href="index.php">
<img src="https://empreenderhorizonte.com/wp-content/uploads/2025/02/Logo-2.0.2-Sala-Do-Empreendedor-Horizonte-300x160.png" class="logo-main" alt="Logo">
</a>
</div>
<div class="header-right">
<div class="transparency-info">
<p>PORTAL DA TRANSPARÊNCIA</p>
<p class="highlight">REFERÊNCIA EM DESENVOLVIMENTO</p>
</div>
</div>
</div>
</header>
<section class="hero">
<div class="container">
<span class="badge-ouro">IDENTIFICAÇÃO DIGITAL</span>
<h1>Atendimento Unificado</h1>
<p class="frase-inspira">Conectando seu negócio ao futuro de Horizonte.</p>
</div>
</section>
<main class="container">
<div class="contact-card-wrapper">
<style>
/* Reset de container para o wrapper larinster */
.contact-card-wrapper { max-width: 900px; margin: 0 auto; padding: 20px; }
.lnsr-fieldset {
border: 2px solid #e2e8f0;
border-radius: 15px;
padding: 20px;
margin-bottom: 25px;
background: #f8fafc;
text-align: left;
}
.lnsr-legend {
padding: 0 15px;
font-weight: 800;
color: var(--sebrae-blue);
font-size: 0.8rem;
text-transform: uppercase;
background: #f8fafc;
border-radius: 5px;
}
.grid-2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 15px;
margin-bottom: 15px;
}
.form-control {
width: 100%;
padding: 12px;
border-radius: 10px;
border: 1px solid #cbd5e1;
margin-top: 5px;
margin-bottom: 10px;
font-family: 'Inter', sans-serif;
}
label {
font-size: 0.7rem;
font-weight: 700;
color: var(--text-light);
text-transform: uppercase;
display: block;
margin-left: 5px;
}
@media (max-width: 600px) {
.grid-2 { grid-template-columns: 1fr; }
}
</style>
<div id="container_triagem">
<form id="formID" autocomplete="off" class="contact-card">
<div style="text-align: center; margin-bottom: 30px;">
<h3 style="color: var(--sebrae-blue); font-weight: 800;">VALIDAÇÃO DE ACESSO</h3>
<p style="font-size: 0.85rem; color: var(--text-light);">Informe seu CPF para iniciar o atendimento.</p>
</div>
<input type="text" name="cpf" id="cpf" placeholder="000.000.000-00" class="lnsr-input" style="font-size: 1.4rem; text-align: center; font-weight: 800;" required>
<div id="loading_cpf" style="display:none; text-align: center; margin-bottom: 10px;">
<i class="fas fa-circle-notch fa-spin"></i> Sincronizando...
</div>
<div id="campos_extensao" style="display:none;">
<label>Nome Completo</label>
<input type="text" name="nome_completo" id="nome_usuario" class="lnsr-input" readonly style="background: #f1f5f9;">
<label>O que você busca hoje?</label>
<select name="assunto" id="assunto_select" class="lnsr-input" required>
<option value="">Selecione uma opção...</option>
<optgroup label="💡 ORIENTAÇÕES (Informativo)">
<option value="ORI_MEI" data-tipo="orientacao">Quero saber como ser MEI</option>
<option value="ORI_BOLETO" data-tipo="orientacao">Como emitir meu boleto DAS</option>
<option value="ORI_NOTAFISCAL" data-tipo="orientacao">Como emitir Nota Fiscal</option>
</optgroup>
<optgroup label="⚙️ SERVIÇOS DIGITAIS (Solicitação)">
<option value="FORMALIZACAO MEI" data-tipo="servico">Formalização MEI (Abertura)</option>
<option value="DECLARACAO ANUAL DASN" data-tipo="servico">Fazer Declaração Anual</option>
<option value="ALTERACAO_BAIXA" data-tipo="servico">Alteração ou Baixa de CNPJ</option>
<option value="OUTROS" data-tipo="servico">Outros Assuntos</option>
</optgroup>
</select>
<div id="bloco_orientacao" style="display:none; background: #e6f0ff; border-left: 5px solid var(--sebrae-blue); padding: 20px; border-radius: 8px; margin-bottom: 20px; text-align: left;">
<div id="texto_orientacao" style="font-size: 0.9rem; color: #003399; line-height: 1.5;"></div>
<p style="margin-top:15px; font-size: 0.75rem; font-weight: 700; color: var(--sebrae-blue);">
<i class="fas fa-info-circle"></i> Ao clicar abaixo, um protocolo de orientação será registrado.
</p>
</div>
<div id="bloco_mensagem" style="display:none; text-align: left;">
<label>Detalhes da Solicitação</label>
<textarea name="mensagem" id="mensagem_input" class="lnsr-input" rows="3" placeholder="Como podemos te ajudar?"></textarea>
</div>
<button type="submit" id="btn_submit" class="btn-submit">Gerar Protocolo</button>
</div>
</form>
</div>
<div id="container_cadastro" style="display: none;">
<form id="formAdd" autocomplete="off" class="contact-card">
<input type="hidden" name="novo_cliente" value="1">
<div style="text-align: center; margin-bottom: 35px;">
<div style="background: #FFF9E6; color: #D97706; padding: 15px; border-radius: 12px; margin-bottom: 20px; font-weight: 700; font-size: 0.9rem; border: 1px solid #FFE6A5;">
<i class="fas fa-user-plus"></i> CPF não encontrado. Complete seu cadastro para continuar.
</div>
<h2 style="color: var(--sebrae-blue); font-weight: 900; text-transform: uppercase;">Cadastro de Usuário</h2>
</div>
<div id="campos_dinamicos">
<fieldset class="lnsr-fieldset">
<legend class="lnsr-legend">Dados Pessoais</legend>
<label>Nome Completo</label>
<input type="text" name="nome_completo" required class="form-control" style="text-transform: uppercase;">
<div class="grid-2">
<div><label>RG</label><input type="text" name="rg" class="form-control" style="text-transform: uppercase;"></div>
<div><label>Data de Nascimento</label><input type="date" name="data_nascimento" class="form-control"></div>
</div>
<div class="grid-2">
<div><label>Nome da Mãe</label><input type="text" name="nome_mae" class="form-control" style="text-transform: uppercase;"></div>
<div><label>Nome do Pai</label><input type="text" name="nome_pai" class="form-control" style="text-transform: uppercase;"></div>
</div>
<label>Naturalidade</label>
<input type="text" name="naturalidade" class="form-control" style="text-transform: uppercase;">
</fieldset>
<fieldset class="lnsr-fieldset">
<legend class="lnsr-legend">Endereço Residencial</legend>
<div class="grid-2">
<div><label>CEP</label><input type="text" name="cep" id="cep" class="form-control mask-cep" required></div>
<div><label>Número</label><input type="text" name="numero" class="form-control" required></div>
</div>
<label>Logradouro</label>
<input type="text" name="logradouro" id="logradouro" class="form-control" required style="text-transform: uppercase;">
<label>Bairro</label>
<input type="text" name="bairro" id="bairro" class="form-control" required style="text-transform: uppercase;">
<div class="grid-2">
<div><label>Cidade</label><input type="text" name="cidade" id="cidade" value="HORIZONTE" class="form-control" readonly></div>
<div><label>UF</label><input type="text" name="estado" id="estado" value="CE" class="form-control" readonly></div>
</div>
</fieldset>
<fieldset class="lnsr-fieldset" style="border-color: var(--sebrae-yellow);">
<legend class="lnsr-legend" style="color: #D97706;">Dados da Empresa / MEI</legend>
<label>Possui CNPJ?</label>
<select id="tem_cnpj" name="possui_cnpj" class="form-control">
<option value="NAO">NÃO</option>
<option value="SIM">SIM</option>
</select>
<div id="div-cnpj" style="display:none; margin-top:15px;">
<label>Número do CNPJ</label>
<input type="text" name="cnpj" id="cnpj_pj" class="mask-cnpj form-control" placeholder="00.000.000/0000-00">
<div id="div-empresa" style="display:none; margin-top:15px;">
<label>Razão Social</label>
<input type="text" name="razao_social" id="razao_social" class="form-control" style="text-transform: uppercase;">
<label>Nome Fantasia</label>
<input type="text" name="nome_fantasia" id="nome_fantasia" class="form-control" style="text-transform: uppercase;">
<input type="hidden" name="data_abertura" id="h_data_abertura">
<input type="hidden" name="atividade_principal" id="h_atividade_principal">
<input type="hidden" name="logradouro_pj" id="h_logradouro_pj">
<input type="hidden" name="numero_pj" id="h_numero_pj">
<input type="hidden" name="complemento_pj" id="h_complemento_pj">
<input type="hidden" name="cep_pj" id="h_cep_pj">
<input type="hidden" name="bairro_pj" id="h_bairro_pj">
<input type="hidden" name="municipio_pj" id="h_municipio_pj">
<input type="hidden" name="uf_pj" id="h_uf_pj">
<input type="hidden" name="email_pj" id="h_email_pj">
<input type="hidden" name="telefone_pj" id="h_telefone_pj">
<input type="hidden" name="efr" id="h_efr">
<input type="hidden" name="situacao_cadastral" id="h_situacao_cadastral">
<input type="hidden" name="data_situacao_cadastral" id="h_data_situacao_cadastral">
<input type="hidden" name="motivo_situacao_cadastral" id="h_motivo_situacao_cadastral">
</div>
</div>
</fieldset>
<fieldset class="lnsr-fieldset" style="border-color: var(--sebrae-blue);">
<legend class="lnsr-legend" style="color: var(--sebrae-blue);">Contato Direto</legend>
<div class="grid-2">
<div><label>WhatsApp</label><input type="text" name="telefone" id="tel_cadastro" class="form-control mask-tel" required></div>
<div><label>E-mail</label><input type="email" name="email" class="form-control" required></div>
</div>
</fieldset>
<button type="submit" id="btnFinalizar" style="width: 100%; padding: 22px; background: var(--sebrae-blue); color: #fff; border: none; border-radius: 12px; font-weight: 900; cursor: pointer; text-transform: uppercase; transition: 0.3s;">
FINALIZAR CADASTRO E CONTINUAR
</button>
<button type="button" onclick="location.reload()" style="width: 100%; background: none; border: none; color: #64748b; margin-top: 15px; cursor: pointer; font-weight: 600; font-size: 0.8rem;">
<i class="fas fa-arrow-left"></i> Voltar e corrigir CPF
</button>
</div>
</form>
</div>
</div>
</main>
<footer>
<div class="container">
<div class="footer-logos">
<img src="https://empreenderhorizonte.com/wp-content/uploads/2025/02/logo-horioznte-2025-1536x390-1-300x76.png" alt="Prefeitura de Horizonte">
<img src="https://empreenderhorizonte.com/wp-content/uploads/2025/02/sebrae-logo-1-1024x554-1-300x162.png" alt="Sebrae">
<img src="https://empreenderhorizonte.com/wp-content/uploads/2025/02/Logo-2.0.2-Sala-Do-Empreendedor-Horizonte-300x160.png"
alt="Sala do Empreendedor"
style="display: block; max-width: 150px; width: 100%; height: auto; transition: transform 0.3s ease; cursor: pointer;"
onmouseover="this.style.transform='scale(1.05)';"
onmouseout="this.style.transform='scale(1)';"
>
</div>
<div class="footer-grid">
<div>
<h4 style="color: var(--sebrae-yellow); margin-bottom: 20px;">Localização</h4>
<p>Centro Administrativo Domingão</p>
<p>Rua Baturité, 770 - Planalto Horizonte</p>
<p>Horizonte - CE, CEP: 62880-000</p>
</div>
<div>
<h4 style="color: var(--sebrae-yellow); margin-bottom: 20px;">Atendimento</h4>
<p>Segunda a Sexta-feira</p>
<p>08:00h às 11:00h | 14:00h às 16:00h</p>
</div>
<div style="display: flex; flex-direction: column; gap: 15px;">
<h4 style="color: var(--sebrae-yellow); margin-bottom: 5px; font-size: 1.1rem; text-transform: uppercase; letter-spacing: 1px;">Siga nossas redes</h4>
<div style="display: flex; gap: 12px; align-items: center;">
<a href="https://instagram.com/empreenderhorizonte" target="_blank" title="Instagram" style="background: linear-gradient(45deg, #f09433, #dc2743, #bc1888); color: white; width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; text-decoration: none; transition: all 0.3s ease;" onmouseover="this.style.transform='translateY(-5px)';" onmouseout="this.style.transform='translateY(0)';">
<i class="fab fa-instagram" style="font-size: 1.4rem;"></i>
</a>
<a href="https://wa.me/5585985662043" target="_blank" title="WhatsApp" style="background: #25D366; color: white; width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; text-decoration: none; transition: all 0.3s ease;" onmouseover="this.style.transform='translateY(-5px)';" onmouseout="this.style.transform='translateY(0)';">
<i class="fab fa-whatsapp" style="font-size: 1.4rem;"></i>
</a>
<a href="https://facebook.com/empreenderhorizonte" target="_blank" title="Facebook" style="background: #1877F2; color: white; width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; text-decoration: none; transition: all 0.3s ease;" onmouseover="this.style.transform='translateY(-5px)';" onmouseout="this.style.transform='translateY(0)';">
<i class="fab fa-facebook-f" style="font-size: 1.3rem;"></i>
</a>
<a href="https://g.co/kgs/zqWh24V" target="_blank" title="Google" style="background: white; color: #4285F4; width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; text-decoration: none; transition: all 0.3s ease; border: 1px solid #ddd;" onmouseover="this.style.transform='translateY(-5px)';" onmouseout="this.style.transform='translateY(0)';">
<i class="fab fa-google" style="font-size: 1.2rem;"></i>
</a>
</div>
</div>
</div>
<style>
.larinster-tag { text-align: center; padding: 25px; font-family: 'Inter', sans-serif; font-size: 0.65rem; letter-spacing: 2px; color: #94a3b8; font-weight: 700; text-transform: uppercase; }
.lnsr-dot { color: #10b981; margin-right: 5px; animation: blink 2s infinite; }
.lnsr-legal-links { margin-bottom: 10px; display: block; }
.lnsr-legal-links a { color: #94a3b8; text-decoration: none; margin: 0 10px; transition: color 0.3s; }
.lnsr-legal-links a:hover { color: var(--sebrae-yellow); }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
</style>
<div class="larinster-tag">
<div class="lnsr-legal-links">
<a href="termos.php">Termos de Uso</a> <span style="opacity: 0.3;">|</span> <a href="privacidade.php">Privacidade</a>
</div>
<div style="margin-bottom: 10px;">
© 2026 <strong>Sala do Empreendedor de Horizonte</strong> | Todos os direitos reservados
</div>
<div>
<i class="fas fa-circle lnsr-dot"></i> Arquitetura de Dados e Conectividade: <strong>Tecnologia Larinster</strong>
</div>
</div>
</div>
</footer>
GEMINI
24/02/2026 às 01:08
Larinster
Prompted Preciso que você crie um menu para a página estrutura.php, o menu deverá ter "Inicio, Estrutura, Contato", estarei mandando o código completo e por favor, não modificar nada do código original e nem remover nada:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sala do Empreendedor | Horizonte - CE</title>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;800&family=Open+Sans:wght@400;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<style>
:root {
--sebrae-blue: #0054A6;
--sebrae-yellow: #FFCB05;
--horizonte-blue: #003399;
--horizonte-light: #E6F0FF;
--text-dark: #333333;
--text-light: #666666;
--white: #FFFFFF;
--gold: #D4AF37;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body { background-color: #F4F7F9; color: var(--text-dark); font-family: 'Open Sans', sans-serif; line-height: 1.6; }
h1, h2, h3, h4, .font-alt { font-family: 'Montserrat', sans-serif; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
/* BARRA SUPERIOR INSTITUCIONAL */
.top-bar { background: var(--sebrae-blue); color: white; padding: 8px 0; font-size: 0.8rem; }
.top-flex { display: flex; justify-content: space-between; align-items: center; }
/* HEADER */
header { background: var(--white); padding: 20px 0; box-shadow: 0 4px 10px rgba(0,0,0,0.05); position: sticky; top: 0; z-index: 1000; }
.header-flex { display: flex; justify-content: space-between; align-items: center; }
.logo-group { display: flex; align-items: center; gap: 20px; }
.logo-img { height: 75px; width: auto; }
/* HERO SECTION */
.hero { background: linear-gradient(135deg, var(--sebrae-blue) 0%, var(--horizonte-blue) 100%); color: white; padding: 80px 0 120px; text-align: center; position: relative; overflow: hidden; }
.hero::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 10px; background: var(--sebrae-yellow); }
.badge-ouro {
background: var(--sebrae-yellow); color: var(--sebrae-blue);
padding: 10px 25px; border-radius: 50px; font-weight: 800; font-size: 0.9rem;
display: inline-block; margin-bottom: 20px; box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
.hero h1 { font-size: 3rem; margin-bottom: 15px; text-shadow: 2px 2px 4px rgba(0,0,0,0.3); }
.frase-inspira { font-style: italic; font-size: 1.3rem; color: var(--horizonte-light); font-weight: 300; }
/* SEÇÃO ESTATÍSTICAS */
.stats-container { margin-top: -60px; position: relative; z-index: 20; }
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; }
.stat-card {
background: white; padding: 30px; border-radius: 15px; text-align: center;
box-shadow: 0 10px 30px rgba(0,0,0,0.1); border-bottom: 4px solid var(--sebrae-yellow);
}
.stat-number { display: block; font-size: 2.2rem; font-weight: 800; color: var(--sebrae-blue); font-family: 'Montserrat'; }
.stat-label { font-size: 0.8rem; color: var(--text-light); text-transform: uppercase; font-weight: 600; letter-spacing: 1px; }
/* CARDS DE SERVIÇOS */
.section-padding { padding: 80px 0; }
.grid-services { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 25px; margin-top: 40px; }
.card-service { background: white; padding: 30px; border-radius: 12px; border-bottom: 5px solid var(--sebrae-blue); transition: 0.3s; box-shadow: 0 5px 15px rgba(0,0,0,0.05); }
.card-service:hover { transform: translateY(-10px); box-shadow: 0 10px 25px rgba(0,0,0,0.1); }
.card-service h3 { color: var(--sebrae-blue); margin-bottom: 15px; }
/* AGENTE E SELOS */
.info-split { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.agente-highlight { background: var(--horizonte-light); padding: 40px; border-radius: 20px; border-left: 10px solid var(--sebrae-blue); display: flex; flex-direction: column; gap: 20px; }
.selos-display { display: flex; gap: 20px; margin-top: 10px; }
.selo-item { background: white; padding: 15px; border-radius: 10px; text-align: center; flex: 1; border: 1px solid #ddd; }
/* FOTOS */
.foto-container { width: 100%; height: 320px; border-radius: 15px; overflow: hidden; box-shadow: 0 5px 15px rgba(0,0,0,0.1); margin-bottom: 20px; background: #eee; }
.foto-container img { width: 100%; height: 100%; display: block; object-fit: cover; }
.foto-agente {
width: 160px;
height: 160px;
border-radius: 50%;
border: 5px solid var(--white);
margin-bottom: 15px;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
overflow: hidden;
}
.foto-agente img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* ALERTAS */
.alert-faturamento { background: #FFF9E6; border: 2px solid var(--sebrae-yellow); padding: 30px; border-radius: 15px; margin-top: 50px; display: flex; align-items: center; gap: 20px; }
/* FOOTER */
footer { background: #1A1A1A; color: white; padding: 80px 0 20px; }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 40px; margin-bottom: 50px; }
.footer-logos { display: flex; justify-content: center; align-items: center; gap: 40px; background: white; padding: 30px; border-radius: 15px; margin-bottom: 60px; flex-wrap: wrap; }
.footer-logos img { height: 55px; width: auto; object-fit: contain; }
.larinster-tag { text-align: center; font-size: 0.75rem; color: #888; border-top: 1px solid #333; padding-top: 20px; letter-spacing: 2px; }
.parceiros-container { display: flex; justify-content: space-around; align-items: center; flex-wrap: wrap; gap: 40px; filter: grayscale(100%); opacity: 0.6; transition: 0.5s; }
.parceiros-container:hover { filter: grayscale(0%); opacity: 1; }
/* --- NOVAS REGRAS DE RESPONSIVIDADE --- */
@media (max-width: 992px) {
.hero h1 { font-size: 2.2rem; }
.info-split { grid-template-columns: 1fr; }
.grid-services { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
.header-flex { flex-direction: column; text-align: center; gap: 15px; }
header div[style*="text-align: right"] { text-align: center !important; }
.top-flex { flex-direction: column; gap: 5px; text-align: center; }
.hero { padding: 60px 0 100px; }
.hero h1 { font-size: 1.8rem; }
.frase-inspira { font-size: 1.1rem; }
.grid-services { grid-template-columns: 1fr; }
/* Ajuste da seção de licitações */
div[style*="grid-column: span 2"] { grid-column: span 1 !important; }
div[style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important; }
/* Ajuste do cabeçalho de seção com ícone */
div[style*="display: flex; align-items: center; gap: 20px"] {
flex-direction: column;
text-align: center;
}
.alert-faturamento { flex-direction: column; text-align: center; }
.agente-highlight { padding: 25px; align-items: center; text-align: center; }
.selos-display { flex-direction: column; width: 100%; }
/* Cursos header */
div[style*="justify-content: space-between; align-items: flex-end"] {
flex-direction: column;
align-items: center;
text-align: center;
gap: 20px;
}
}
@media (max-width: 480px) {
.logo-img { height: 60px; }
.stat-card { padding: 20px; }
.stat-number { font-size: 1.8rem; }
.section-padding { padding: 40px 0; }
}
</style>
</head>
<body>
<div class="top-bar" style="background: var(--sebrae-blue); color: white; padding: 6px 0; font-size: 0.7rem; font-family: 'Montserrat', sans-serif;">
<div class="container" style="display: flex; justify-content: flex-end; align-items: center; padding: 0 20px;">
<div style="display: flex; align-items: center; gap: 8px;">
<div class="status-dot"></div>
<span style="letter-spacing: 0.5px; text-transform: uppercase; font-weight: 500;">Conexão Ativa: <strong style="color: #00ff88;">Sistema Larinster</strong></span>
</div>
</div>
</div>
<header class="main-header">
<div class="container header-grid">
<div class="header-left">
<div class="authority-badge">
<p class="label-small">Município de</p>
<p class="city-name">HORIZONTE</p>
<p class="state-name">ESTADO DO CEARÁ</p>
</div>
</div>
<div class="header-center">
<a href="index.php">
<img src="https://empreenderhorizonte.com/wp-content/uploads/2025/02/Logo-2.0.2-Sala-Do-Empreendedor-Horizonte-300x160.png" class="logo-main" alt="Logo Sala do Empreendedor Horizonte">
</a>
</div>
<div class="header-right">
<div class="transparency-info">
<p>PORTAL DA TRANSPARÊNCIA</p>
<p class="highlight">REFERÊNCIA EM DESENVOLVIMENTO</p>
</div>
</div>
</div>
</header>
<style>
/* Estrutura Base (Desktop) */
.main-header {
border-bottom: 4px solid var(--sebrae-yellow);
background: white;
padding: 15px 0;
}
.header-grid {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 20px;
}
.authority-badge { border-left: 3px solid var(--sebrae-yellow); padding-left: 15px; }
.label-small { margin: 0; font-size: 0.65rem; color: var(--text-light); text-transform: uppercase; letter-spacing: 1px; }
.city-name { margin: 0; font-size: 1.3rem; font-weight: 900; color: var(--horizonte-blue); line-height: 1; }
.state-name { margin: 0; font-size: 0.6rem; color: var(--sebrae-blue); font-weight: 700; }
.logo-main { max-height: 85px; width: auto; display: block; margin: 0 auto; }
.transparency-info { text-align: right; color: var(--text-light); font-size: 0.65rem; font-weight: 600; }
.transparency-info .highlight { color: var(--sebrae-blue); margin: 0; text-transform: uppercase; }
.status-dot { width: 7px; height: 7px; background: #00ff88; border-radius: 50%; box-shadow: 0 0 10px #00ff88; animation: pulse 2s infinite; }
@keyframes pulse {
0% { opacity: 1; transform: scale(1); }
50% { opacity: 0.4; transform: scale(1.1); }
100% { opacity: 1; transform: scale(1); }
}
/* RESPONSIVIDADE (Ajuste solicitado) */
@media (max-width: 768px) {
.header-grid {
grid-template-columns: 1fr; /* Apenas uma coluna para a logo */
padding: 10px 0;
}
/* OCULTA as laterais no mobile */
.header-left, .header-right {
display: none !important;
}
.logo-main {
max-height: 70px; /* Reduz um pouco a logo no celular para ganhar espaço */
}
.top-bar .container {
justify-content: center; /* Centraliza o status do sistema no celular */
}
}
</style>
<section class="hero">
<div class="container">
<div class="badge-ouro" style="background: var(--sebrae-yellow); color: var(--sebrae-blue); padding: 10px 25px; border-radius: 50px; font-weight: 800; display: inline-block; margin-bottom: 20px;">ESTRUTURA FÍSICA E OPERACIONAL</div>
<h1>Nossa Unidade</h1>
<p class="frase-inspira" style="font-style: italic; color: var(--horizonte-light);">Infraestrutura tecnológica e humana a serviço do empreendedor horizontino.</p>
</div>
</section>
<style>
/* Reset e Variáveis para garantir funcionamento */
:root {
--sebrae-blue: #0054A6;
--sebrae-yellow: #FFCB05;
--horizonte-blue: #003399;
--text-dark: #333333;
--text-light: #666666;
--gold: #D4AF37;
}
.lnsr-card-estrutura {
background: white;
padding: 30px;
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0,0,0,0.05);
border-left: 6px solid var(--sebrae-blue);
height: 100%;
}
.item-infra {
display: flex;
align-items: center;
gap: 15px;
padding-bottom: 12px;
border-bottom: 1px solid #f0f0f0;
margin-bottom: 10px;
}
.item-infra:last-child { border-bottom: none; }
.item-infra i {
color: var(--sebrae-blue);
font-size: 1.2rem;
width: 30px;
text-align: center;
}
.item-infra span {
display: block;
font-size: 0.7rem;
color: var(--text-light);
text-transform: uppercase;
font-weight: 600;
line-height: 1.2;
}
.item-infra strong {
display: block;
font-size: 0.95rem;
color: var(--text-dark);
font-weight: 700;
}
/* Galeria Multi-Fotos */
.lnsr-gallery-group {
background: white;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 10px 25px rgba(0,0,0,0.06);
border: 1px solid #edf2f7;
margin-bottom: 30px;
}
.gallery-header { padding: 15px 20px; background: #f8fafc; border-bottom: 1px solid #edf2f7; }
.tag-count { font-size: 0.65rem; font-weight: 800; color: var(--sebrae-blue); letter-spacing: 1px; }
.photo-grid-multi {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 12px;
padding: 15px;
background: #fff;
}
.foto-item {
height: 220px;
border-radius: 12px;
overflow: hidden;
background: #e2e8f0;
position: relative;
}
.foto-item img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
cursor: pointer;
display: block;
}
.foto-item img:hover { transform: scale(1.05); }
.gallery-caption { padding: 20px; border-top: 1px solid #edf2f7; }
.gallery-caption h4 { color: var(--sebrae-blue); margin-bottom: 5px; display: flex; align-items: center; gap: 10px; font-weight: 700; }
.gallery-caption p { color: var(--text-light); font-size: 0.9rem; margin: 0; }
@media (max-width: 768px) {
.photo-grid-multi { grid-template-columns: 1fr; }
.foto-item { height: 200px; }
}
</style>
<main class="container" style="margin-top: -40px; padding-bottom: 80px; position: relative; z-index: 30;">
<div class="grid-estrutura" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px;">
<div class="lnsr-card-estrutura">
<h3 style="margin-bottom: 20px; color: var(--sebrae-blue); font-size: 1.2rem;">
<i class="fas fa-users-viewfinder"></i> Espaço de Atendimento
</h3>
<div style="display: flex; flex-direction: column;">
<div class="item-infra">
<i class="fas fa-desktop"></i>
<div>
<span>Guichês Disponíveis</span>
<strong>04 Estações de Atendimento</strong>
</div>
</div>
<div class="item-infra">
<i class="fas fa-couch"></i>
<div>
<span>Capacidade de Espera</span>
<strong>12 Assentos Confortáveis</strong>
</div>
</div>
<div class="item-infra">
<i class="fas fa-wheelchair"></i>
<div>
<span>Acessibilidade</span>
<strong>Padrão PCD Completo</strong>
</div>
</div>
</div>
</div>
<div class="lnsr-card-estrutura" style="border-left-color: var(--gold);">
<h3 style="margin-bottom: 20px; color: var(--sebrae-blue); font-size: 1.2rem;">
<i class="fas fa-microchip"></i> Recursos Tecnológicos
</h3>
<div style="display: flex; flex-direction: column;">
<div class="item-infra">
<i class="fas fa-wifi"></i>
<div>
<span>Conectividade</span>
<strong>Link Fibra Óptica 300mb</strong>
</div>
</div>
<div class="item-infra">
<i class="fas fa-print"></i>
<div>
<span>Suporte Documental</span>
<strong>Multifuncionais de Alta Produção</strong>
</div>
</div>
<div class="item-infra">
<i class="fas fa-server"></i>
<div>
<span>Ecossistema Digital</span>
<strong>Integração Larinster Cloud 2026</strong>
</div>
</div>
</div>
</div>
</div>
<section style="margin-top: 50px;">
<h2 style="color: var(--sebrae-blue); margin-bottom: 10px; text-align: center; font-weight: 800; font-family: 'Montserrat', sans-serif;">
<i class="fas fa-images" style="color: var(--sebrae-yellow);"></i> TOUR PELA UNIDADE
</h2>
<p style="text-align: center; color: var(--text-light); margin-bottom: 40px;">Conheça os detalhes da nossa estrutura física</p>
<div style="display: flex; flex-direction: column; gap: 10px;">
<div class="lnsr-gallery-group">
<div class="gallery-header">
<span class="tag-count">FACHADA E ACESSO PRINCIPAL</span>
</div>
<div class="photo-grid-multi">
<div class="foto-item"><img src="LINK_DA_FOTO_PREDIO_1" alt="Fachada 1"></div>
<div class="foto-item"><img src="LINK_DA_FOTO_PREDIO_2" alt="Fachada 2"></div>
<div class="foto-item"><img src="LINK_DA_FOTO_PORTARIA" alt="Portaria"></div>
</div>
<div class="gallery-caption">
<h4><i class="fas fa-building"></i> Entrada do Prédio e Portaria</h4>
<p>Localização estratégica no Centro Administrativo Domingão, Horizonte-CE.</p>
</div>
</div>
<div class="lnsr-gallery-group">
<div class="gallery-header">
<span class="tag-count">SALA DE ESPERA</span>
</div>
<div class="photo-grid-multi">
<div class="foto-item"><img src="LINK_DA_FOTO_ESPERA_1" alt="Espera 1"></div>
<div class="foto-item"><img src="LINK_DA_FOTO_ESPERA_2" alt="Espera 2"></div>
</div>
<div class="gallery-caption">
<h4><i class="fas fa-couch"></i> Conforto e Recepção</h4>
<p>Espaço climatizado preparado para receber o empreendedor com dignidade.</p>
</div>
</div>
<div class="lnsr-gallery-group">
<div class="gallery-header">
<span class="tag-count">ESTAÇÕES DE TRABALHO</span>
</div>
<div class="photo-grid-multi">
<div class="foto-item"><img src="LINK_DA_FOTO_ATEND_1" alt="Atendimento 1"></div>
<div class="foto-item"><img src="LINK_DA_FOTO_ATEND_2" alt="Atendimento 2"></div>
</div>
<div class="gallery-caption">
<h4><i class="fas fa-user-tie"></i> Sala de Atendimento</h4>
<p>Privacidade e tecnologia para consultorias e processos de formalização.</p>
</div>
</div>
</div>
</section>
<div class="lnsr-card-estrutura" style="margin-top: 20px; border-left-color: #2ecc71;">
<div style="display: flex; align-items: center; gap: 25px; flex-wrap: wrap;">
<div style="flex: 1; min-width: 280px;">
<h3 style="color: var(--sebrae-blue); margin-bottom: 10px;">Infraestrutura de Excelência</h3>
<p style="color: var(--text-light); margin: 0;">Ambiente planejado para agilizar a vida de quem gera emprego em Horizonte. Sistema 100% integrado à rede Larinster.</p>
</div>
<div style="background: #f0fff4; padding: 15px; border-radius: 12px; border: 1px solid #c6f6d5;">
<span style="color: #2f855a; font-weight: 800; font-size: 0.8rem; display: block; text-align: center;">PADRÃO OURO</span>
<i class="fas fa-certificate" style="color: #48bb78; display: block; text-align: center; margin-top: 5px; font-size: 1.5rem;"></i>
</div>
</div>
</div>
</main>
<footer>
<div class="container">
<div class="footer-logos">
<img src="https://empreenderhorizonte.com/wp-content/uploads/2025/02/logo-horioznte-2025-1536x390-1-300x76.png" alt="Prefeitura de Horizonte">
<img src="https://empreenderhorizonte.com/wp-content/uploads/2025/02/sebrae-logo-1-1024x554-1-300x162.png" alt="Sebrae">
<img src="https://empreenderhorizonte.com/wp-content/uploads/2025/02/Logo-2.0.2-Sala-Do-Empreendedor-Horizonte-300x160.png"
alt="Sala do Empreendedor"
style="display: block;
max-width: 150px; /* Aumentei de 300px para 450px */
width: 100%;
height: auto;
transition: transform 0.3s ease;
cursor: pointer;"
onmouseover="this.style.transform='scale(1.05)';"
onmouseout="this.style.transform='scale(1)';"
>
</div>
<div class="footer-grid">
<div>
<h4 style="color: var(--sebrae-yellow); margin-bottom: 20px;">Localização</h4>
<p>Centro Administrativo Domingão</p>
<p>Rua Baturité, 770 - Planalto Horizonte</p>
<p>Horizonte - CE, CEP: 62880-000</p>
</div>
<div>
<h4 style="color: var(--sebrae-yellow); margin-bottom: 20px;">Atendimento</h4>
<p>Segunda a Sexta-feira</p>
<p>08:00h às 11:00h | 14:00h às 16:00h</p>
</div>
<div style="display: flex; flex-direction: column; gap: 15px;">
<h4 style="color: var(--sebrae-yellow); margin-bottom: 5px; font-size: 1.1rem; text-transform: uppercase; letter-spacing: 1px;">Siga nossas redes</h4>
<div style="display: flex; gap: 12px; align-items: center;">
<a href="https://instagram.com/empreenderhorizonte" target="_blank" title="Instagram"
style="background: linear-gradient(45deg, #f09433, #dc2743, #bc1888); color: white; width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; text-decoration: none; transition: all 0.3s ease;"
onmouseover="this.style.transform='translateY(-5px)'; this.style.boxShadow='0 5px 15px rgba(188,24,136,0.4)'"
onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='none'">
<i class="fab fa-instagram" style="font-size: 1.4rem;"></i>
</a>
<a href="https://wa.me/5585985662043" target="_blank" title="WhatsApp"
style="background: #25D366; color: white; width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; text-decoration: none; transition: all 0.3s ease;"
onmouseover="this.style.transform='translateY(-5px)'; this.style.boxShadow='0 5px 15px rgba(37,211,102,0.4)'"
onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='none'">
<i class="fab fa-whatsapp" style="font-size: 1.4rem;"></i>
</a>
<a href="https://facebook.com/empreenderhorizonte" target="_blank" title="Facebook"
style="background: #1877F2; color: white; width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; text-decoration: none; transition: all 0.3s ease;"
onmouseover="this.style.transform='translateY(-5px)'; this.style.boxShadow='0 5px 15px rgba(24,119,242,0.4)'"
onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='none'">
<i class="fab fa-facebook-f" style="font-size: 1.3rem;"></i>
</a>
<a href="https://g.co/kgs/zqWh24V" target="_blank" title="Google Meu Negócio"
style="background: white; color: #4285F4; width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; text-decoration: none; transition: all 0.3s ease; border: 1px solid #ddd;"
onmouseover="this.style.transform='translateY(-5px)'; this.style.boxShadow='0 5px 15px rgba(0,0,0,0.1)'"
onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='none'">
<i class="fab fa-google" style="font-size: 1.2rem;"></i>
</a>
</div>
</div>
</div>
<style>
.larinster-tag {
text-align: center;
padding: 25px;
font-family: 'Inter', sans-serif;
font-size: 0.65rem;
letter-spacing: 2px;
color: #94a3b8;
font-weight: 700;
text-transform: uppercase;
}
.lnsr-dot { color: #10b981; margin-right: 5px; animation: blink 2s infinite; }
.lnsr-legal-links { margin-bottom: 10px; display: block; }
.lnsr-legal-links a {
color: #94a3b8;
text-decoration: none;
margin: 0 10px;
transition: color 0.3s;
}
.lnsr-legal-links a:hover { color: var(--sebrae-yellow); }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
</style>
<div class="larinster-tag">
<div class="lnsr-legal-links">
<a href="termos.php">Termos de Uso</a>
<span style="opacity: 0.3;">|</span>
<a href="privacidade.php">Privacidade</a>
</div>
<div style="margin-bottom: 10px;">
© 2026 <strong>Sala do Empreendedor de Horizonte</strong> | Todos os direitos reservados
</div>
<div>
<i class="fas fa-circle lnsr-dot"></i>
Arquitetura de Dados e Conectividade: <strong>Tecnologia Larinster</strong>
</div>
</div>
</div>
</footer>
<script>
function animarNumerosLarinster() {
const stats = [
{ id: 'lnsr_total_atendimentos', final: 0 },
{ id: 'lnsr_mei_ativos', final: 0 },
{ id: 'lnsr_capacitacoes', final: 0 },
{ id: 'lnsr_satisfacao', final: 0, sufixo: '%' }
];
stats.forEach(stat => {
const elemento = document.getElementById(stat.id);
if (!elemento) return;
let inicio = 0;
const duracao = 2000; // 2 segundos de animação
const incremento = stat.final / (duracao / 16); // 60fps aprox.
const atualizar = () => {
inicio += incremento;
if (inicio < stat.final) {
// Formata com ponto para milhares se for maior que 999
let valorFormatado = Math.floor(inicio).toLocaleString('pt-BR');
elemento.innerText = valorFormatado + (stat.sufixo || '');
requestAnimationFrame(atualizar);
} else {
elemento.innerText = stat.final.toLocaleString('pt-BR') + (stat.sufixo || '');
}
};
atualizar();
});
}
// Disparar a animação quando a seção estiver visível na tela
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
animarNumerosLarinster();
observer.unobserve(entry.target); // Anima apenas uma vez
}
});
}, { threshold: 0.5 });
document.querySelectorAll('.stats-container').forEach(section => {
observer.observe(section);
});
</script>
</body>
</html>
GEMINI
24/02/2026 às 01:08
Larinster
Prompted Atualiza novamente, alguns ficou faltando o style funcionar:
<main class="container" style="margin-top: -40px; padding-bottom: 80px; position: relative; z-index: 30;">
<div class="grid-estrutura" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px;">
<div class="lnsr-card-estrutura">
<h3 style="margin-bottom: 20px; color: var(--sebrae-blue);"><i class="fas fa-users-viewfinder"></i> Espaço de Atendimento</h3>
<div style="display: flex; flex-direction: column; gap: 15px;">
<div class="item-infra">
<i class="fas fa-desktop"></i>
<div>
<span>Guichês Disponíveis</span>
<strong>04 Estações de Atendimento</strong>
</div>
</div>
<div class="item-infra">
<i class="fas fa-couch"></i>
<div>
<span>Capacidade de Espera</span>
<strong>12 Assentos Confortáveis</strong>
</div>
</div>
<div class="item-infra">
<i class="fas fa-wheelchair"></i>
<div>
<span>Acessibilidade</span>
<strong>Padrão PCD Completo</strong>
</div>
</div>
</div>
</div>
<div class="lnsr-card-estrutura" style="border-left-color: var(--gold);">
<h3 style="margin-bottom: 20px; color: var(--sebrae-blue);"><i class="fas fa-microchip"></i> Recursos Tecnológicos</h3>
<div style="display: flex; flex-direction: column; gap: 15px;">
<div class="item-infra">
<i class="fas fa-wifi"></i>
<div>
<span>Conectividade</span>
<strong>Link Fibra Óptica 300mb</strong>
</div>
</div>
<div class="item-infra">
<i class="fas fa-print"></i>
<div>
<span>Suporte Documental</span>
<strong>Multifuncionais de Alta Produção</strong>
</div>
</div>
<div class="item-infra">
<i class="fas fa-server"></i>
<div>
<span>Ecossistema Digital</span>
<strong>Integração Larinster Cloud 2026</strong>
</div>
</div>
</div>
</div>
</div>
<section style="margin-top: 40px;">
<h2 style="color: var(--sebrae-blue); margin-bottom: 10px; text-align: center; font-weight: 800;">
<i class="fas fa-images" style="color: var(--sebrae-yellow);"></i> TOUR PELA UNIDADE
</h2>
<p style="text-align: center; color: var(--text-light); margin-bottom: 30px;">Explore os ambientes da nossa Sala do Empreendedor</p>
<div style="display: grid; grid-template-columns: 1fr; gap: 30px;">
<div class="lnsr-gallery-group">
<div class="gallery-header">
<span class="tag-count">FOTOS DA FACHADA E ACESSO</span>
</div>
<div class="photo-grid-multi">
<div class="foto-item"><img src="URL_PREDIO_1" alt="Fachada 1"></div>
<div class="foto-item"><img src="URL_PREDIO_2" alt="Fachada 2"></div>
<div class="foto-item"><img src="URL_PORTARIA_1" alt="Portaria"></div>
</div>
<div class="gallery-caption">
<h4><i class="fas fa-building"></i> Entrada do Prédio e Portaria</h4>
<p>Localizada no Centro Administrativo Domingão, com fácil acesso e identificação.</p>
</div>
</div>
<div class="lnsr-gallery-group">
<div class="gallery-header">
<span class="tag-count">AMBIENTE INTERNO</span>
</div>
<div class="photo-grid-multi">
<div class="foto-item"><img src="URL_ESPERA_1" alt="Sala de Espera 1"></div>
<div class="foto-item"><img src="URL_ESPERA_2" alt="Sala de Espera 2"></div>
<div class="foto-item"><img src="URL_ESPERA_3" alt="Recepção"></div>
</div>
<div class="gallery-caption">
<h4><i class="fas fa-couch"></i> Sala de Espera e Recepção</h4>
<p>Ambiente amplo, climatizado e equipado com poltronas confortáveis para sua conveniência.</p>
</div>
</div>
<div class="lnsr-gallery-group">
<div class="gallery-header">
<span class="tag-count">ÁREA OPERACIONAL</span>
</div>
<div class="photo-grid-multi">
<div class="foto-item"><img src="URL_ATEND_1" alt="Atendimento 1"></div>
<div class="foto-item"><img src="URL_ATEND_2" alt="Atendimento 2"></div>
</div>
<div class="gallery-caption">
<h4><i class="fas fa-user-tie"></i> Sala de Atendimento Individualizado</h4>
<p>Guichês equipados para suporte técnico, formalização de MEI e consultorias Sebrae.</p>
</div>
</div>
</div>
</section>
<style>
/* Estilos Larinster para Múltiplas Fotos */
.lnsr-gallery-group {
background: white;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 10px 25px rgba(0,0,0,0.06);
border: 1px solid #edf2f7;
}
.gallery-header { padding: 15px 20px; background: #f8fafc; border-bottom: 1px solid #edf2f7; }
.tag-count { font-size: 0.65rem; font-weight: 800; color: var(--sebrae-blue); letter-spacing: 1px; }
.photo-grid-multi {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 10px;
padding: 10px;
background: #fff;
}
.foto-item {
height: 220px;
border-radius: 10px;
overflow: hidden;
background: #e2e8f0;
}
.foto-item img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
cursor: pointer;
}
.foto-item img:hover { transform: scale(1.08); }
.gallery-caption { padding: 20px; border-top: 1px solid #edf2f7; }
.gallery-caption h4 { color: var(--sebrae-blue); margin-bottom: 5px; display: flex; align-items: center; gap: 10px; }
.gallery-caption p { color: var(--text-light); font-size: 0.9rem; }
/* Responsividade para o grid interno */
@media (max-width: 600px) {
.photo-grid-multi { grid-template-columns: 1fr; }
.foto-item { height: 180px; }
}
</style>
<div class="lnsr-card-estrutura" style="margin-top: 30px; border-left-color: #2ecc71;">
<div style="display: flex; align-items: center; gap: 25px; flex-wrap: wrap;">
<div style="flex: 1; min-width: 300px;">
<h3 style="color: var(--sebrae-blue);">Infraestrutura de Excelência</h3>
<p style="margin-top: 10px; color: var(--text-light);">Nosso compromisso é oferecer um ambiente que reflita a qualidade dos serviços da <strong>Sala do Empreendedor de Horizonte</strong>. Espaço 100% acessível e monitorado.</p>
</div>
</div>
</div>
</main>
GEMINI
24/02/2026 às 01:08
Larinster
Prompted Pode atualizar novamente, pois não é somente uma foto de cada não:
<main class="container" style="margin-top: -40px; padding-bottom: 80px; position: relative; z-index: 30;">
<div class="grid-estrutura" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px;">
<div class="lnsr-card-estrutura">
<h3 style="margin-bottom: 20px; color: var(--sebrae-blue);"><i class="fas fa-users-viewfinder"></i> Espaço de Atendimento</h3>
<div style="display: flex; flex-direction: column; gap: 15px;">
<div class="item-infra">
<i class="fas fa-desktop"></i>
<div>
<span>Guichês Disponíveis</span>
<strong>04 Estações de Atendimento</strong>
</div>
</div>
<div class="item-infra">
<i class="fas fa-couch"></i>
<div>
<span>Capacidade de Espera</span>
<strong>12 Assentos Confortáveis</strong>
</div>
</div>
<div class="item-infra">
<i class="fas fa-wheelchair"></i>
<div>
<span>Acessibilidade</span>
<strong>Padrão PCD Completo</strong>
</div>
</div>
</div>
</div>
<div class="lnsr-card-estrutura" style="border-left-color: var(--gold);">
<h3 style="margin-bottom: 20px; color: var(--sebrae-blue);"><i class="fas fa-microchip"></i> Recursos Tecnológicos</h3>
<div style="display: flex; flex-direction: column; gap: 15px;">
<div class="item-infra">
<i class="fas fa-wifi"></i>
<div>
<span>Conectividade</span>
<strong>Link Fibra Óptica 300mb</strong>
</div>
</div>
<div class="item-infra">
<i class="fas fa-print"></i>
<div>
<span>Suporte Documental</span>
<strong>Multifuncionais de Alta Produção</strong>
</div>
</div>
<div class="item-infra">
<i class="fas fa-server"></i>
<div>
<span>Ecossistema Digital</span>
<strong>Integração Larinster Cloud 2026</strong>
</div>
</div>
</div>
</div>
</div>
<section style="margin-top: 40px;">
<h2 style="color: var(--sebrae-blue); margin-bottom: 25px; text-align: center; font-weight: 800;">
<i class="fas fa-camera-retro" style="color: var(--sebrae-yellow);"></i> CONHEÇA NOSSA INFRAESTRUTURA
</h2>
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px;">
<div class="lnsr-photo-card">
<div class="foto-container">
<img src="URL_DA_FOTO_ENTRADA_PREDIO" alt="Entrada do Centro Administrativo Domingão">
</div>
<div class="photo-label">
<span class="tag-local">EXTERIOR</span>
<h4>Entrada do Prédio</h4>
<p>Centro Administrativo Domingão</p>
</div>
</div>
<div class="lnsr-photo-card">
<div class="foto-container">
<img src="URL_DA_FOTO_ENTRADA_SALA" alt="Porta de Entrada da Sala do Empreendedor">
</div>
<div class="photo-label">
<span class="tag-local">ACESSO</span>
<h4>Portaria da Unidade</h4>
<p>Identificação e Recepção</p>
</div>
</div>
<div class="lnsr-photo-card">
<div class="foto-container">
<img src="URL_DA_FOTO_SALA_ESPERA" alt="Ambiente de Espera Climatizado">
</div>
<div class="photo-label">
<span class="tag-local">CONFORTO</span>
<h4>Sala de Espera</h4>
<p>Ambiente climatizado e humanizado</p>
</div>
</div>
<div class="lnsr-photo-card">
<div class="foto-container">
<img src="URL_DA_FOTO_SALA_ATENDIMENTO" alt="Estações de Atendimento Individual">
</div>
<div class="photo-label">
<span class="tag-local">OPERACIONAL</span>
<h4>Espaço de Atendimento</h4>
<p>Privacidade e consultoria técnica</p>
</div>
</div>
</div>
</section>
<style>
.lnsr-card-estrutura {
background: white;
padding: 30px;
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0,0,0,0.05);
border-left: 6px solid var(--sebrae-blue);
}
.item-infra { display: flex; align-items: center; gap: 15px; padding-bottom: 10px; border-bottom: 1px solid #f0f0f0; }
.item-infra i { color: var(--sebrae-blue); font-size: 1.2rem; width: 25px; }
.item-infra span { display: block; font-size: 0.75rem; color: var(--text-light); text-transform: uppercase; }
.item-infra strong { display: block; font-size: 0.95rem; color: var(--text-dark); }
/* Estilos da Galeria */
.lnsr-photo-card {
background: white;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 5px 15px rgba(0,0,0,0.08);
transition: transform 0.3s ease;
}
.lnsr-photo-card:hover { transform: translateY(-5px); }
.foto-container { height: 200px; background: #e2e8f0; position: relative; overflow: hidden; }
.foto-container img { width: 100%; height: 100%; object-fit: cover; }
.photo-label { padding: 15px; }
.tag-local {
font-size: 0.6rem;
font-weight: 800;
background: var(--horizonte-light);
color: var(--sebrae-blue);
padding: 3px 8px;
border-radius: 4px;
margin-bottom: 8px;
display: inline-block;
}
.photo-label h4 { font-size: 1rem; color: var(--text-dark); margin: 5px 0; }
.photo-label p { font-size: 0.8rem; color: var(--text-light); }
</style>
<div class="lnsr-card-estrutura" style="margin-top: 30px; border-left-color: #2ecc71;">
<div style="display: flex; align-items: center; gap: 25px; flex-wrap: wrap;">
<div style="flex: 1; min-width: 300px;">
<h3 style="color: var(--sebrae-blue);">Ambiente Climatizado e Humanizado</h3>
<p style="margin-top: 10px; color: var(--text-light);">Nossa sala no <strong>Centro Administrativo Domingão</strong> foi projetada para oferecer agilidade e conforto. Todos os processos são 100% digitais, reduzindo o uso de papel e o tempo de espera do empreendedor.</p>
</div>
<div style="display: flex; gap: 15px;">
<div style="text-align: center; padding: 15px; background: #f8f9fa; border-radius: 10px; border: 1px dashed #ccc;">
<i class="fas fa-snowflake" style="color: #3498db; font-size: 1.5rem;"></i>
<p style="font-size: 0.7rem; font-weight: 700; margin-top: 5px;">CLIMATIZADO</p>
</div>
<div style="text-align: center; padding: 15px; background: #f8f9fa; border-radius: 10px; border: 1px dashed #ccc;">
<i class="fas fa-shield-halved" style="color: #27ae60; font-size: 1.5rem;"></i>
<p style="font-size: 0.7rem; font-weight: 700; margin-top: 5px;">SEGURO</p>
</div>
</div>
</div>
</div>
</main>