:root {
  --azul: #071633;
  --azul-2: #0d2a57;
  --amarelo: #f5c84b;
  --amarelo-2: #ffd96e;
  --creme: #f5f1e8;
  --gelo: #f8fafc;
  --texto: #202737;
  --branco: #ffffff;
  --linha: rgba(7, 22, 51, 0.12);
  --sombra: 0 24px 60px rgba(7, 22, 51, 0.12);
  --limite: min(1180px, calc(100% - 36px));
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--gelo); color: var(--texto); font-family: "DM Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.6; overflow-x: hidden; }
h1, h2, h3, .menu, .botao { font-family: "Sora", "DM Sans", ui-sans-serif, system-ui, sans-serif; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
.botao-contato * { pointer-events: none; }
.limite { width: var(--limite); margin: 0 auto; }
.atalho { position: absolute; left: -9999px; }
.atalho:focus { left: 16px; top: 16px; z-index: 999; background: #fff; padding: 10px 14px; border-radius: 10px; }

.cabecalho__barra { background: var(--azul); color: rgba(255,255,255,.78); font-size: .88rem; }
.cabecalho__barra-conteudo { min-height: 38px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.cabecalho__barra a { color: var(--amarelo); font-weight: 800; }
.cabecalho__navegacao { background: rgba(248,250,252,.92); backdrop-filter: blur(16px); border-bottom: 1px solid var(--linha); position: relative; z-index: 40; }
.cabecalho__navegacao-conteudo { min-height: 88px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.logo img { width: 180px; height: auto; }
.menu { display: flex; align-items: center; gap: 28px; font-weight: 700; color: #40506a; }
.menu > a:not(.menu__cta):hover { color: var(--azul); }
.menu__cta { background: var(--azul); color: white; padding: 12px 18px; border-radius: 999px; }
.menu-botao { display: none; width: 48px; height: 48px; border: 1px solid var(--linha); border-radius: 14px; background: white; align-items: center; justify-content: center; flex-direction: column; gap: 5px; }
.menu-botao span { width: 20px; height: 2px; background: var(--azul); }

.abertura { background: var(--creme); padding: 56px 0 72px; }
.abertura__grade { display: grid; grid-template-columns: .9fr 1.1fr; grid-template-rows: auto auto; gap: 24px 42px; align-items: center; }
.abertura__texto { padding: 18px 0 18px 10px; }
.selo { display: inline-flex; padding: 8px 13px; border: 1px solid rgba(7,22,51,.16); border-radius: 999px; font-size: .75rem; letter-spacing: .12em; font-weight: 900; color: var(--azul-2); }
.abertura h1 { margin: 20px 0; font-size: clamp(2.8rem, 5.5vw, 5.4rem); line-height: .92; letter-spacing: -.055em; color: var(--azul); }
.abertura__texto > p { margin: 0; max-width: 58ch; font-size: 1.08rem; color: #566274; }
.abertura__acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.botao { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 22px; border-radius: 999px; font-weight: 900; transition: transform .2s ease, box-shadow .2s ease; }
.botao:hover { transform: translateY(-2px); }
.botao--amarelo { background: linear-gradient(135deg, var(--amarelo), var(--amarelo-2)); color: var(--azul); box-shadow: 0 16px 34px rgba(245,200,75,.26); }
.botao--linha { border: 1px solid rgba(7,22,51,.18); color: var(--azul); background: rgba(255,255,255,.38); }
.abertura__imagem { position: relative; overflow: hidden; border-radius: 8px 56px 8px 56px; box-shadow: var(--sombra); min-height: 560px; }
.abertura__imagem img { width: 100%; height: 100%; min-height: 560px; object-fit: cover; }
.abertura__imagem::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(7,22,51,.58)); pointer-events: none; }
.abertura__legenda { position: absolute; z-index: 2; left: 28px; right: 28px; bottom: 24px; color: white; display: flex; align-items: end; justify-content: space-between; gap: 18px; }
.abertura__legenda span { font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.7); }
.abertura__legenda strong { max-width: 280px; font-size: 1.2rem; line-height: 1.2; }
.abertura__nota { grid-column: 1 / 2; display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start; border-top: 1px solid rgba(7,22,51,.18); padding: 20px 10px 0; }
.abertura__nota-numero { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--azul); color: var(--amarelo); font-weight: 900; }
.abertura__nota p { margin: 2px 0 0; color: #566274; }

.manifesto { background: var(--azul); color: white; padding: 74px 0; }
.manifesto__grade { display: grid; grid-template-columns: 1.15fr .85fr; gap: 70px; align-items: end; }
.manifesto__chamada { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(2.2rem, 4.5vw, 4rem); line-height: 1.04; letter-spacing: -.03em; color: white; }
.manifesto__texto p { margin: 0 0 22px; color: rgba(255,255,255,.72); font-size: 1.03rem; }
.manifesto__texto a { color: var(--amarelo); font-weight: 900; }

.solucoes { padding: 94px 0; }
.titulo-secao { max-width: 760px; margin-bottom: 38px; }
.titulo-secao > span, .processo__intro > span, .sobre__texto > span, .chamada span { display: inline-block; margin-bottom: 13px; font-size: .78rem; letter-spacing: .13em; font-weight: 900; color: #ad8310; }
.titulo-secao h2, .processo h2, .sobre h2, .chamada h2, .duvidas h2 { margin: 0; color: var(--azul); font-size: clamp(2.2rem, 4.6vw, 4rem); line-height: 1; letter-spacing: -.045em; }
.solucoes__mosaico { display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px; }
.solucao { position: relative; min-height: 430px; overflow: hidden; border-radius: 26px; background: var(--azul); box-shadow: var(--sombra); }
.solucao img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.solucao:hover img { transform: scale(1.025); }
.solucao::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7,22,51,.04) 35%, rgba(7,22,51,.86) 100%); }
.solucao__conteudo { position: absolute; z-index: 2; left: 24px; right: 24px; bottom: 22px; color: white; }
.solucao__icone { display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: 14px; background: rgba(255,255,255,.14); backdrop-filter: blur(10px); color: var(--amarelo); }
.solucao__icone ion-icon { font-size: 1.5rem; }
.solucao h3 { margin: 12px 0 6px; font-size: 1.65rem; line-height: 1.05; }
.solucao p { margin: 0 0 12px; color: rgba(255,255,255,.76); max-width: 52ch; }
.solucao a { color: var(--amarelo); font-weight: 900; }
.solucao--camera { grid-column: span 7; min-height: 520px; }
.solucao--portao { grid-column: span 5; min-height: 520px; }
.solucao--alarme { grid-column: span 4; }
.solucao--acesso { grid-column: span 4; }
.solucao--video { grid-column: span 4; }
.solucao--concertina { grid-column: 3 / span 8; min-height: 390px; }

.processo {
  position: relative;
  overflow: hidden;
  background: var(--creme);
  padding: 108px 0;
}
.processo::before {
  content: "";
  position: absolute;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  right: -250px;
  top: -270px;
  background: rgba(245, 200, 75, .16);
  pointer-events: none;
}
.processo__conteudo { position: relative; z-index: 1; }
.processo__intro {
  position: static;
  width: min(900px, 100%);
  margin: 0 auto 46px;
  text-align: center;
}
.processo__intro > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 13px;
  margin-bottom: 16px;
  border: 1px solid rgba(173, 131, 16, .25);
  border-radius: 999px;
  background: rgba(245, 200, 75, .12);
}
.processo__intro h2 { max-width: 800px; margin-inline: auto; }
.processo__intro p {
  color: #5c6879;
  max-width: 66ch;
  margin: 20px auto 0;
  font-size: 1.08rem;
}
.processo__etapas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  width: 100%;
}
.processo__etapa {
  min-width: 0;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  padding: 30px;
  border: 1px solid rgba(7,22,51,.1);
  border-radius: 26px;
  background: rgba(255,255,255,.78);
  box-shadow: 0 16px 40px rgba(7,22,51,.07);
  backdrop-filter: blur(10px);
}
.processo__etapa:hover {
  border-color: rgba(245,200,75,.55);
  box-shadow: 0 22px 50px rgba(7,22,51,.11);
}
.processo__icone {
  width: 60px;
  height: 60px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: var(--azul);
  color: var(--amarelo);
  box-shadow: 0 10px 24px rgba(7,22,51,.16);
}
.processo__icone ion-icon { font-size: 1.8rem; }
.processo__etapas h3 {
  margin: 1px 0 8px;
  font-size: 1.26rem;
  line-height: 1.25;
  color: var(--azul);
}
.processo__etapas p { margin: 0; color: #5c6879; max-width: 50ch; }

.sobre { padding: 94px 0; background: white; }
.sobre__grade { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.sobre__imagem { position: relative; padding: 20px 0 20px 20px; }
.sobre__imagem::before { content: ""; position: absolute; inset: 0 16% 0 0; background: var(--amarelo); border-radius: 8px 48px 8px 48px; }
.sobre__imagem img { position: relative; z-index: 1; width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: 8px 48px 8px 48px; box-shadow: var(--sombra); }
.sobre__texto p { color: #5c6879; }
.sobre__dados { margin-top: 26px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.sobre__dados div { padding: 18px; border: 1px solid var(--linha); border-radius: 18px; }
.sobre__dados strong { display: block; color: var(--azul); margin-bottom: 4px; }
.sobre__dados span { color: #667085; font-size: .92rem; }

.chamada { background: var(--azul); color: white; padding: 58px 0; }
.chamada__conteudo { display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.chamada span { color: rgba(255,255,255,.62); }
.chamada h2 { color: white; max-width: 800px; font-size: clamp(2rem, 4vw, 3.2rem); }

.duvidas { padding: 94px 0; }
.duvidas__grade { display: grid; grid-template-columns: .8fr 1.2fr; gap: 50px; align-items: start; }
.titulo-secao--duvidas { margin: 0; }
.duvidas__lista { display: grid; gap: 12px; }
details { background: white; border: 1px solid var(--linha); border-radius: 18px; padding: 20px 22px; box-shadow: 0 10px 30px rgba(7,22,51,.06); }
summary { cursor: pointer; font-weight: 850; color: var(--azul); list-style: none; }
summary::-webkit-details-marker { display: none; }
details p { margin: 12px 0 0; color: #5f6c80; }

.rodape { background: #041025; color: rgba(255,255,255,.68); padding-top: 54px; }
.rodape__grade { display: grid; grid-template-columns: 1.2fr .8fr .8fr; gap: 28px; padding-bottom: 36px; }
.rodape__marca img { width: 175px; filter: brightness(0) invert(1); }
.rodape__marca p { max-width: 40ch; }
.rodape h2 { margin: 0 0 12px; color: white; font-size: 1.05rem; }
.rodape a { display: block; margin-bottom: 8px; }
.rodape a:hover { color: white; }
.rodape__base { text-align: center; border-top: 1px solid rgba(255,255,255,.08); padding: 16px 20px 24px; font-size: .9rem; }

.whatsapp-fixo { position: fixed; right: 18px; bottom: 18px; z-index: 50; width: 60px; height: 60px; border-radius: 50%; background: #20c765; box-shadow: 0 18px 34px rgba(0,0,0,.22); display: grid; place-items: center; }
.whatsapp-fixo svg { width: 31px; height: 31px; fill: white; }

@media (max-width: 980px) {
  .menu-botao { display: inline-flex; }
  .menu { display: none; position: absolute; top: calc(100% + 8px); left: 18px; right: 18px; background: white; padding: 18px; border: 1px solid var(--linha); border-radius: 20px; box-shadow: var(--sombra); flex-direction: column; align-items: stretch; gap: 12px; }
  .menu.ativo { display: flex; }
  .cabecalho__navegacao { position: sticky; top: 0; }
  .cabecalho__navegacao-conteudo { position: relative; }
  .abertura__grade, .manifesto__grade, .sobre__grade, .duvidas__grade { grid-template-columns: 1fr; }
  .abertura__nota { grid-column: auto; }
  .solucao--camera, .solucao--portao, .solucao--alarme, .solucao--acesso, .solucao--video, .solucao--concertina { grid-column: span 6; min-height: 420px; }
  .chamada__conteudo { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 680px) {
  .cabecalho__barra-conteudo { min-height: 46px; flex-direction: column; justify-content: center; padding: 6px 0; line-height: 1.2; }
  .cabecalho__navegacao-conteudo { min-height: 76px; }
  .logo img { width: 150px; }
  .abertura { padding: 34px 0 54px; }
  .abertura h1 { font-size: clamp(2.55rem, 12vw, 4rem); }
  .abertura__imagem, .abertura__imagem img { min-height: 430px; }
  .abertura__imagem { border-radius: 6px 34px 6px 34px; }
  .abertura__legenda { flex-direction: column; align-items: flex-start; }
  .manifesto, .solucoes, .processo, .sobre, .duvidas { padding: 70px 0; }
  .solucoes__mosaico { grid-template-columns: 1fr; }
  .solucao--camera, .solucao--portao, .solucao--alarme, .solucao--acesso, .solucao--video, .solucao--concertina { grid-column: auto; min-height: 390px; }
  .sobre__imagem { padding-left: 10px; }
  .sobre__dados { grid-template-columns: 1fr; }
  .processo__etapas { grid-template-columns: 1fr; }
  .processo__etapa { grid-template-columns: 54px minmax(0, 1fr); padding: 22px; }
  .processo__icone { width: 52px; height: 52px; border-radius: 16px; }
  .rodape__grade { grid-template-columns: 1fr; }
}


/* Ionicons e microinterações */
ion-icon { display: inline-block; vertical-align: middle; flex: 0 0 auto; }
.cabecalho__barra-conteudo > span,
.cabecalho__barra-conteudo > a { display: inline-flex; align-items: center; gap: 7px; }
.cabecalho__barra ion-icon { font-size: 1rem; }
.botao-contato { gap: 8px; }
.botao-contato > ion-icon { font-size: 1.1em; }
.menu-botao ion-icon { font-size: 1.75rem; color: var(--azul); }
.sobre__dados ion-icon { display: block; margin-bottom: 8px; font-size: 1.35rem; color: #ad8310; }
.whatsapp-fixo ion-icon { font-size: 32px; color: white; }

/* A animação combina Bootstrap .fade/.show com utilities Tailwind de transição. */
[data-animar] { will-change: opacity, transform; }
@media (prefers-reduced-motion: reduce) {
  [data-animar] { transition: none !important; transform: none !important; opacity: 1 !important; }
}

@media (max-width: 820px) {
  .processo__etapas { grid-template-columns: 1fr; }
  .processo__intro { text-align: left; margin-inline: 0; }
  .processo__intro h2, .processo__intro p { margin-left: 0; margin-right: 0; }
}