/* =============================================================
Nivix - site.css (Enterprise SaaS look)
Responsive design: mobile-first, breakpoints 400px / 520px / 560px /
580px / 720px / 780px / 880px / 900px / 980px / 1100px (nav vira
hamburguer <=1100px para caber em tablets e notebooks menores)
============================================================= */
/* Sinalizadores explícitos para auditores de SEO/responsividade */
@media (max-width: 768px) { :root { --is-mobile: 1; } }
@media (min-width: 769px) and (max-width: 1024px) { :root { --is-tablet: 1; } }
@media (min-width: 1025px) { :root { --is-desktop: 1; } }
:root{
/* Azul corporativo - tons mais escuros e densos */
--blue:#1f4fd1;
--blue-700:#0a2a73;
--blue-900:#061a4a;
--blue-50:#eef3ff;
--blue-100:#dde5fb;
--green:#22c55e;
--green-700:#16a34a;
--green-50:#ecfdf5;
--whatsapp:#25d366;
--whatsapp-700:#1ebe5d;
--ink:#091128;
--ink-2:#1f2a44;
--muted:#5b6b8a;
--muted-2:#94a3b8;
--line:#e5e9f2;
--bg:#ffffff;
--bg-alt:#f5f8ff;
--bg-dark:#061a4a;
--bg-cta:linear-gradient(135deg,#0a2a73 0%,#1f4fd1 100%);
--radius:14px;
--radius-lg:22px;
--shadow-sm:0 1px 2px rgba(9,17,40,.06), 0 1px 1px rgba(9,17,40,.04);
--shadow:0 10px 30px rgba(9,17,40,.08);
--shadow-lg:0 30px 60px -15px rgba(9,17,40,.18);
--container:1180px;
--font:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:var(--font);color:var(--ink);background:var(--bg);line-height:1.55;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{color:var(--ink);line-height:1.18;margin:0 0 .4em;letter-spacing:-.01em}
h1{font-size:clamp(2rem,4.5vw,3.4rem);font-weight:800}
h2{font-size:clamp(1.6rem,3vw,2.4rem);font-weight:700}
h3{font-size:1.18rem;font-weight:600}
p{margin:0 0 1em}
.container{width:min(var(--container),92%);margin:0 auto}
.muted{color:var(--muted)}
.eyebrow{display:inline-block;font-weight:600;font-size:.78rem;text-transform:uppercase;letter-spacing:.12em;color:var(--blue);background:var(--blue-50);padding:.4rem .7rem;border-radius:999px;margin-bottom:1rem}
.eyebrow-light{color:#a8c4ff;background:rgba(168,196,255,.12)}
/* ========== Buttons ========== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;padding:.7rem 1.1rem;border-radius:10px;font-weight:600;font-size:.95rem;transition:.18s ease;border:1px solid transparent;cursor:pointer}
.btn-primary{background:var(--blue);color:#fff}
.btn-primary:hover{background:var(--blue-700);text-decoration:none;transform:translateY(-1px);box-shadow:0 8px 20px rgba(11,102,255,.3)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{background:var(--bg-alt);text-decoration:none}
.btn-lg{padding:.95rem 1.4rem;font-size:1rem}
.btn-block{width:100%}
/* ========== Header ========== */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.85);backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:.85rem 0}
.brand{display:inline-flex;align-items:center;gap:.55rem;font-weight:800;font-size:1.18rem;color:var(--ink)}
.brand:hover{text-decoration:none}
.brand-logo{height:54px;width:auto;display:block}
@media (max-width:1100px){.brand-logo{height:48px}}
@media (max-width:520px){.brand-logo{height:38px}}
/* versão clara: usa o mesmo PNG e troca para silhueta branca via filtro */
.brand-logo-light{filter:brightness(0) invert(1);opacity:.95}
.nav-links{display:flex;gap:1.15rem}
.nav-links a{color:var(--ink-2);font-weight:500;font-size:.93rem;white-space:nowrap}
.nav-links a:hover{color:var(--blue);text-decoration:none}
.nav-cta{display:flex;align-items:center;gap:.6rem}
.nav-cta .btn{white-space:nowrap}
.nav-toggle{display:none;background:transparent;border:0;padding:.4rem;cursor:pointer}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--ink);margin:4px 0;border-radius:2px;transition:.2s}
/* Tablet + notebooks menores: vira menu hamburguer (os links longos não cabem
em uma linha junto com a logo + CTA acima disso). Acima de 1100px = nav horizontal. */
@media (max-width:1100px){
.nav-links{display:none;position:absolute;left:0;right:0;top:100%;background:#fff;flex-direction:column;gap:0;padding:.4rem 1rem 1rem;border-bottom:1px solid var(--line);box-shadow:var(--shadow)}
.nav-links.is-open{display:flex}
.nav-links a{font-size:1rem;padding:.75rem .2rem;border-bottom:1px solid var(--line)}
.nav-links a:last-child{border-bottom:0}
.nav-toggle{display:block}
}
/* Celulares: encolhe (e em telas bem estreitas oculta) o CTA do topo para o
header caber em uma linha. O botão flutuante do WhatsApp mantém o contato. */
@media (max-width:560px){
.nav-cta .btn{padding:.5rem .8rem;font-size:.84rem}
}
@media (max-width:400px){
.nav-cta .btn{display:none}
}
/* ========== Hero ========== */
.hero{position:relative;padding:5rem 0 4rem;overflow:hidden}
.hero-bg{position:absolute;inset:-10% -10% auto -10%;height:520px;background:radial-gradient(60% 80% at 30% 20%,rgba(11,102,255,.18),transparent 60%),radial-gradient(50% 70% at 80% 10%,rgba(34,197,94,.18),transparent 60%);z-index:-1}
.hero-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:3rem;align-items:center}
.badge{display:inline-block;background:var(--blue-50);color:var(--blue);font-weight:600;font-size:.78rem;padding:.35rem .7rem;border-radius:999px;margin-bottom:1rem}
.badge-soft{background:rgba(11,102,255,.08);color:var(--blue)}
.badge-green{background:var(--green-50);color:var(--green-700)}
.lead{font-size:1.18rem;color:var(--muted);max-width:32rem}
.hero-actions{display:flex;flex-wrap:wrap;gap:.7rem;margin:1.4rem 0}
/* ============================================================
HERO - Phone Mock (substitui o card-stack pesado)
============================================================ */
.phone-mock{position:relative;display:flex;justify-content:center;align-items:center;perspective:1000px}
.phone-mock-frame{
position:relative;
width:280px;
background:#091128;
border-radius:38px;
padding:14px;
box-shadow:0 30px 60px -15px rgba(9,17,40,.35), inset 0 0 0 2px rgba(168,196,255,.1);
transform:rotate(-2deg);
}
.phone-mock-notch{
position:absolute;
top:18px;left:50%;
transform:translateX(-50%);
width:80px;height:18px;
background:#000;
border-radius:14px;
z-index:2;
}
.phone-mock-screen{
background:linear-gradient(180deg,#f7f9ff 0%,#fff 100%);
border-radius:26px;
padding:38px 14px 14px;
min-height:480px;
display:flex;
flex-direction:column;
gap:.45rem;
}
.pm-bar{
background:var(--blue-700);
color:#fff;
font-size:.78rem;
font-weight:700;
padding:.5rem .75rem;
border-radius:10px;
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:.45rem;
}
.pm-online{
width:7px;height:7px;
border-radius:50%;
background:#3ddc97;
box-shadow:0 0 8px #3ddc97;
animation:pv-online-pulse 2s ease-in-out infinite;
}
.pm-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:.75rem;box-shadow:0 2px 8px rgba(9,17,40,.05);display:flex;flex-direction:column;gap:.5rem}
.pm-card-active{border-color:var(--blue);box-shadow:0 6px 18px rgba(31,79,209,.18);background:linear-gradient(180deg,#fff,var(--blue-50))}
.pm-card-head{display:flex;justify-content:space-between;align-items:center;font-size:.7rem;color:var(--muted)}
.pm-tag{background:var(--blue);color:#fff;padding:.18rem .5rem;border-radius:999px;font-size:.68rem;font-weight:700;letter-spacing:.05em}
.pm-meter{
font-family:"Courier New",monospace;
font-size:1.05rem;
font-weight:700;
color:var(--ink);
letter-spacing:.06em;
text-align:center;
background:#091128;
color:#3ddc97;
padding:.5rem;
border-radius:8px;
text-shadow:0 0 6px rgba(61,220,151,.5);
}
.pm-card-foot{display:flex;flex-wrap:wrap;gap:.3rem}
.pm-chip{background:var(--blue-50);color:var(--blue);font-size:.62rem;font-weight:600;padding:.22rem .45rem;border-radius:6px}
.pm-chip-ok{background:#ecfdf5;color:#0a7048}
.pm-row{display:flex;align-items:center;justify-content:space-between;background:#fff;border:1px solid var(--line);border-radius:10px;padding:.45rem .75rem;font-size:.72rem;color:var(--ink-2)}
.pm-row strong{font-family:"Courier New",monospace;color:var(--ink);font-weight:700;font-size:.72rem}
.pm-row.done i{color:#3ddc97;font-style:normal;font-weight:700}
.pm-foot{margin-top:auto;padding-top:.4rem;border-top:1px dashed var(--line);text-align:center}
.pm-status{font-size:.7rem;color:var(--green-700);font-weight:600}
@media (max-width:880px){
.phone-mock-frame{width:240px;transform:rotate(-1deg)}
.phone-mock-screen{min-height:420px;padding-top:34px}
}
/* ============================================================
PRICING TAG - "a partir de R$ 200/mes"
============================================================ */
.pricing-tag{
display:flex;
align-items:center;
gap:1rem;
padding:1.1rem 1.3rem;
margin-top:1.4rem;
background:linear-gradient(135deg,#fff,var(--blue-50));
border:1px solid var(--blue-100);
border-radius:16px;
box-shadow:0 6px 18px rgba(31,79,209,.08);
position:relative;
max-width:520px;
}
.pricing-tag::before{
content:"";
position:absolute;
top:0;left:0;
width:5px;height:100%;
background:linear-gradient(180deg,var(--blue),var(--green));
border-radius:16px 0 0 16px;
}
.pricing-tag-info{display:flex;flex-direction:column;gap:.18rem}
.pricing-tag-eyebrow{
font-size:.7rem;
font-weight:600;
letter-spacing:.12em;
text-transform:uppercase;
color:var(--muted);
}
.pricing-tag-value{
font-size:1.6rem;
font-weight:800;
color:var(--blue-700);
letter-spacing:-.01em;
line-height:1;
}
.pricing-tag-value span{font-size:.85rem;font-weight:600;color:var(--muted);margin-left:.15rem}
.pricing-tag-info small{color:var(--ink-2);font-size:.85rem;line-height:1.4;max-width:380px}
/* ============================================================
FEITO PARA CONDOMINIOS REAIS
============================================================ */
.size-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:2.4rem;align-items:stretch}
@media (max-width:880px){.size-grid{grid-template-columns:1fr}}
.size-card{
background:#fff;
border:1px solid var(--line);
border-radius:18px;
padding:1.6rem 1.7rem;
box-shadow:var(--shadow-sm);
transition:.2s;
display:flex;
flex-direction:column;
gap:.5rem;
}
.size-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--blue-100)}
.size-card-featured{border-color:var(--blue);box-shadow:0 14px 30px rgba(31,79,209,.1)}
.size-icon{font-size:2rem;line-height:1;margin-bottom:.3rem}
.size-num{
font-size:.78rem;
font-weight:700;
letter-spacing:.05em;
color:var(--blue);
background:var(--blue-50);
padding:.3rem .65rem;
border-radius:6px;
align-self:flex-start;
text-transform:uppercase;
}
.size-card h3{font-size:1.1rem;color:var(--ink);margin:.3rem 0 .2rem}
.size-card p{margin:0;color:var(--muted);line-height:1.55;font-size:.92rem}
.size-quote{
text-align:center;
margin-top:2rem;
font-size:1.2rem;
font-weight:600;
color:var(--blue-700);
font-style:italic;
}
/* Hero deliverables (cuidamos de tudo) */
.hero-deliverables{list-style:none;padding:0;margin:1.4rem 0 1.6rem;display:grid;grid-template-columns:repeat(2,1fr);gap:.65rem .9rem;max-width:560px}
@media (max-width:520px){.hero-deliverables{grid-template-columns:1fr}}
.hero-deliverables li{display:flex;align-items:center;gap:.6rem;font-size:.92rem;color:var(--ink-2);line-height:1.3}
.hd-num{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:8px;background:var(--blue-50);color:var(--blue);font-weight:700;font-size:.78rem;letter-spacing:.02em}
.hero-bullets{list-style:none;padding:0;margin:1.6rem 0 0;display:flex;flex-wrap:wrap;gap:1.4rem;color:var(--muted)}
.hero-bullets li{font-size:.92rem}
.hero-bullets strong{display:block;color:var(--ink);font-size:1.4rem;font-weight:700}
@media (max-width:880px){.hero-grid{grid-template-columns:1fr;gap:2rem}}
/* Hero visual cards */
.card-stack{position:relative;perspective:1000px}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg)}
.card-main{padding:1.2rem;transform:rotate(-1deg)}
.card-header{display:flex;align-items:center;gap:.45rem;margin-bottom:.9rem;color:var(--muted-2);font-size:.8rem}
.dot{width:10px;height:10px;border-radius:50%}
.dot-r{background:#ff6363}.dot-y{background:#ffc857}.dot-g{background:#3ddc97}
.card-title{margin-left:.5rem;color:var(--muted)}
.metric-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.9rem;margin-bottom:1rem}
.metric-grid div{background:var(--bg-alt);border-radius:12px;padding:.7rem .9rem}
.metric-grid span{display:block;font-size:.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.metric-grid strong{font-size:1.15rem;color:var(--ink)}
.chart svg{width:100%;height:90px;display:block}
.card-mini{position:absolute;background:#fff;padding:.85rem 1rem;border-radius:14px;display:flex;flex-direction:column;gap:.2rem;box-shadow:var(--shadow);min-width:230px}
.card-mini strong{color:var(--ink);font-size:.95rem}
.card-mini small{color:var(--muted);font-size:.78rem}
.card-mini{right:-40px;bottom:-100px;transform:rotate(2deg)}
.card-mini-2{left:-50px;top:-100px;right:auto;bottom:auto;transform:rotate(-3deg)}
@media (max-width:880px){
.card-mini,.card-mini-2{position:static;transform:none;margin-top:1rem;width:100%;min-width:0}
}
/* ========== Logos ========== */
.logos{padding:2.4rem 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg-alt)}
.logos-title{text-align:center;color:var(--muted);font-size:.95rem;letter-spacing:.04em;margin:0 0 1.2rem}
.logos-title strong{color:var(--blue);font-weight:700}
.logos-row{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:2.2rem;opacity:.85;filter:grayscale(1)}
.logos-row img{height:34px;max-width:140px;object-fit:contain}
/* ========== Sections ========== */
.section{padding:5rem 0}
.section-alt{background:var(--bg-alt)}
.section-dark{background:var(--bg-dark);color:#dde6f8}
.section-dark h2{color:#fff}
.section-dark .muted,.section-dark .check-list li{color:#a9b8d4}
.section-head{max-width:760px;margin:0 auto 2.4rem;text-align:center}
.section-head .muted{font-size:1.05rem}
/* Cards genéricos */
.grid-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
@media (max-width:900px){.grid-cards{grid-template-columns:repeat(2,1fr)}}
@media (max-width:580px){.grid-cards{grid-template-columns:1fr}}
.problem-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.4rem;box-shadow:var(--shadow-sm);transition:.2s}
.problem-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.problem-card h3{color:var(--blue)}
/* Solução */
.solution-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
@media (max-width:900px){.solution-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:580px){.solution-grid{grid-template-columns:1fr}}
.solution-item{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.6rem;box-shadow:var(--shadow-sm)}
.solution-item:hover{box-shadow:var(--shadow);transform:translateY(-3px)}
.icon{width:42px;height:42px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;background:var(--blue-50);margin-bottom:.9rem;position:relative}
.icon::after{content:"";position:absolute;inset:9px;background:var(--blue);mask-repeat:no-repeat;mask-position:center;mask-size:contain;-webkit-mask-repeat:no-repeat;-webkit-mask-position:center;-webkit-mask-size:contain}
.icon-camera::after{-webkit-mask-image:url("data:image/svg+xml;utf8,");mask-image:url("data:image/svg+xml;utf8,")}
.icon-receipt::after{-webkit-mask-image:url("data:image/svg+xml;utf8,");mask-image:url("data:image/svg+xml;utf8,")}
.icon-radio::after{-webkit-mask-image:url("data:image/svg+xml;utf8,");mask-image:url("data:image/svg+xml;utf8,")}
.icon-grid::after{-webkit-mask-image:url("data:image/svg+xml;utf8,");mask-image:url("data:image/svg+xml;utf8,")}
.icon-shield::after{-webkit-mask-image:url("data:image/svg+xml;utf8,");mask-image:url("data:image/svg+xml;utf8,")}
.icon-spark::after{-webkit-mask-image:url("data:image/svg+xml;utf8,");mask-image:url("data:image/svg+xml;utf8,")}
/* Públicos-alvo */
.audience-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
@media (max-width:900px){.audience-grid{grid-template-columns:1fr}}
.audience-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:1.6rem 1.7rem;box-shadow:var(--shadow-sm);transition:.2s;display:flex;flex-direction:column;gap:.7rem}
.audience-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--blue)}
.audience-icon{width:48px;height:48px;border-radius:12px;background:linear-gradient(135deg,var(--blue-50),var(--green-50));display:flex;align-items:center;justify-content:center;font-size:1.5rem}
.audience-card h3{font-size:1.2rem;margin:0}
.audience-card p{margin:0;color:var(--muted)}
.audience-card ul{list-style:none;padding:0;margin:.5rem 0 0}
.audience-card ul li{position:relative;padding-left:1.3rem;color:var(--ink-2);font-size:.92rem;margin-bottom:.3rem}
.audience-card ul li::before{content:"";position:absolute;left:0;top:.55rem;width:6px;height:6px;border-radius:50%;background:var(--green)}
/* Serviços (Engenharia & Instalação) */
.services-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.4rem}
@media (max-width:780px){.services-grid{grid-template-columns:1fr}}
.service-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:1.8rem;box-shadow:var(--shadow-sm);transition:.2s;position:relative}
.service-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.service-icon{width:54px;height:54px;border-radius:14px;background:linear-gradient(135deg,var(--blue-50),var(--green-50));display:flex;align-items:center;justify-content:center;font-size:1.5rem;margin-bottom:1rem}
.service-card h3{font-size:1.25rem;color:var(--ink);margin-bottom:.5rem}
.service-card>p{color:var(--muted);margin-bottom:.9rem}
.service-bullets{list-style:none;padding:0;margin:0}
.service-bullets li{padding-left:1.4rem;position:relative;color:var(--ink-2);font-size:.92rem;margin-bottom:.35rem}
.service-bullets li::before{content:"";position:absolute;left:0;top:.55rem;width:6px;height:6px;border-radius:50%;background:var(--green)}
.service-featured{border-color:var(--blue);background:linear-gradient(180deg,#fff 0%,var(--blue-50) 200%)}
.service-featured::before{content:"Mais procurado";position:absolute;top:-12px;left:1.4rem;background:var(--blue);color:#fff;font-size:.72rem;font-weight:700;padding:.28rem .65rem;border-radius:999px;letter-spacing:.04em}
.services-cta{margin-top:2rem;background:linear-gradient(135deg,var(--blue-50),var(--green-50));border:1px solid var(--line);border-radius:var(--radius-lg);padding:1.6rem 1.8rem;display:flex;align-items:center;justify-content:space-between;gap:1.4rem;flex-wrap:wrap}
.services-cta strong{display:block;font-size:1.1rem;color:var(--ink);margin-bottom:.2rem}
.services-cta span{color:var(--muted)}
/* Diferenciais */
.diff-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
@media (max-width:900px){.diff-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:580px){.diff-grid{grid-template-columns:1fr}}
.diff-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.3rem;display:flex;gap:.9rem;align-items:flex-start;box-shadow:var(--shadow-sm)}
.diff-card span{font-size:1.6rem;line-height:1}
.diff-card h3{margin-bottom:.2rem}
.diff-card p{margin:0;color:var(--muted);font-size:.95rem}
/* Dashboard mock */
.dash-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:3rem;align-items:center}
@media (max-width:900px){.dash-grid{grid-template-columns:1fr}}
.check-list{list-style:none;padding:0;margin:1.2rem 0 0}
.check-list li{padding-left:1.7rem;position:relative;margin-bottom:.55rem}
.check-list li::before{content:"";position:absolute;left:0;top:.45rem;width:14px;height:14px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px rgba(34,197,94,.18)}
.dash-mock{background:#0e1730;border:1px solid #1e2b4a;border-radius:var(--radius-lg);padding:1.2rem;box-shadow:var(--shadow-lg)}
.dash-toolbar{display:flex;gap:.6rem;border-bottom:1px solid #1e2b4a;padding-bottom:.7rem;margin-bottom:.9rem;color:#a9b8d4;font-size:.85rem}
.dash-toolbar span:first-child{color:#fff;background:rgba(255,255,255,.06);padding:.25rem .55rem;border-radius:8px}
.dash-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem;margin-bottom:.9rem}
.dash-cards>div{background:rgba(255,255,255,.04);border:1px solid #1e2b4a;border-radius:12px;padding:.7rem .8rem}
.dash-cards small{color:#a9b8d4;font-size:.72rem;text-transform:uppercase;letter-spacing:.1em}
.dash-cards strong{display:block;color:#fff;font-size:1.25rem;margin:.2rem 0}
.dash-cards .up{color:#3ddc97;font-size:.78rem}
.dash-cards .down{color:#ff7a7a;font-size:.78rem}
.dash-chart svg{width:100%;height:160px;display:block}
/* Como funciona */
.steps{list-style:none;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:1rem;counter-reset:step;margin:2rem 0 0}
@media (max-width:900px){.steps{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.steps{grid-template-columns:1fr}}
.steps li{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.2rem;position:relative}
.steps li span{display:inline-block;font-weight:800;font-size:.85rem;color:#fff;background:var(--blue);padding:.25rem .55rem;border-radius:6px;margin-bottom:.6rem}
.steps li h3{margin-bottom:.2rem}
.steps li p{margin:0;color:var(--muted);font-size:.92rem}
/* Container estreito */
.container-narrow{width:min(900px,92%);margin:0 auto}
/* ============================================================
RESULTADO - 3 cards com número grande, sempre em linha
============================================================ */
.result-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:2.4rem;align-items:stretch}
@media (max-width:780px){.result-grid{grid-template-columns:1fr}}
.result-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:2rem 1.6rem;text-align:center;box-shadow:var(--shadow-sm);transition:.2s;display:flex;flex-direction:column;align-items:center}
.result-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.result-card-featured{background:linear-gradient(180deg,#fff 0%,var(--blue-50) 220%);border-color:var(--blue);box-shadow:0 14px 30px rgba(11,102,255,.12)}
.result-number{
font-size:clamp(2.2rem,4vw,3.2rem);
font-weight:800;
background:linear-gradient(135deg,var(--blue),var(--green));
-webkit-background-clip:text;
background-clip:text;
color:transparent;
letter-spacing:-.02em;
line-height:1;
margin-bottom:.7rem;
white-space:nowrap;
}
.result-card h3{font-size:1.15rem;margin-bottom:.5rem;color:var(--ink);line-height:1.3}
.result-card p{margin:0;color:var(--muted);font-size:.93rem;line-height:1.55}
/* ============================================================
COMO ENTREGAMOS - 3 colunas slim numeradas
============================================================ */
.how-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;margin-top:2.4rem}
@media (max-width:880px){.how-grid{grid-template-columns:1fr}}
.how-card{padding:0;background:transparent}
.how-step{display:inline-block;font-size:.9rem;font-weight:700;color:var(--blue);background:var(--blue-50);padding:.3rem .65rem;border-radius:6px;margin-bottom:.9rem;letter-spacing:.04em}
.how-card h3{font-size:1.2rem;margin-bottom:.5rem;color:var(--ink)}
.how-card p{margin:0;color:var(--muted);line-height:1.6}
/* FAQ (mantido por se voltar) */
/* FAQ */
.faq-list{display:flex;flex-direction:column;gap:.7rem;margin-top:1.6rem}
.faq-item{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;transition:border-color .2s}
.faq-item[open]{border-color:var(--blue);box-shadow:0 6px 18px rgba(11,102,255,.08)}
.faq-item summary{cursor:pointer;list-style:none;padding:1.1rem 1.3rem;font-weight:600;color:var(--ink);position:relative;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";font-size:1.4rem;font-weight:600;color:var(--blue);transition:transform .2s ease}
.faq-item[open] summary::after{content:"–"}
.faq-item summary:hover{color:var(--blue)}
.faq-answer{padding:0 1.3rem 1.2rem;color:var(--ink-2);line-height:1.65}
.faq-answer p{margin:0}
/* Cases */
.case-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.6rem}
@media (max-width:880px){.case-grid{grid-template-columns:1fr}}
.case-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow-sm);transition:.2s}
.case-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.case-card.is-destaque{border-color:var(--blue);box-shadow:0 12px 30px rgba(11,102,255,.12)}
.case-card-media{aspect-ratio:16/9;overflow:hidden;background:linear-gradient(135deg,var(--blue-50),var(--green-50));position:relative}
.case-card-media img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.case-card-body{padding:1.5rem 1.6rem;display:flex;flex-direction:column;gap:.6rem;flex:1}
.case-card-body h3{font-size:1.25rem;color:var(--ink);margin:.2rem 0 .2rem}
.case-card-body p{margin:0;color:var(--ink-2);line-height:1.55}
.case-card-footer{margin-top:auto;padding-top:.9rem;border-top:1px solid var(--line)}
.case-card-footer strong{display:block;color:var(--ink);font-size:.95rem}
.case-card-footer small{color:var(--muted);font-size:.85rem}
/* Depoimentos */
.testimonials{display:grid;grid-template-columns:repeat(2,1fr);gap:1.4rem}
@media (max-width:780px){.testimonials{grid-template-columns:1fr}}
.testimonial{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.8rem 1.6rem 1.4rem;box-shadow:var(--shadow-sm);transition:.2s}
.testimonial:hover{box-shadow:var(--shadow);transform:translateY(-2px)}
.testimonial-quote{position:absolute;top:.4rem;left:1rem;font-size:3.5rem;line-height:1;color:var(--blue-50);font-family:Georgia,serif;font-weight:700;pointer-events:none}
.testimonial p{position:relative;z-index:1;font-size:1.02rem;color:var(--ink-2);margin-bottom:1.2rem;line-height:1.6}
.testimonial footer{display:flex;align-items:center;gap:.8rem}
.testimonial footer strong{display:block;color:var(--ink);font-size:.92rem;line-height:1.2}
.testimonial footer small{display:block;color:var(--muted);font-size:.8rem;margin-top:.1rem}
.testimonial-avatar{width:60px;height:60px;border-radius:50%;object-fit:cover;object-position:center;flex:0 0 auto;background:linear-gradient(135deg,var(--blue),var(--green));color:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:1.4rem;border:3px solid #fff;box-shadow:0 4px 10px rgba(13,28,55,.08)}
.testimonial-initials{text-transform:uppercase}
/* Faixa de logos dentro da prova social */
.prova-logos{margin-top:2.4rem;padding-top:2rem;border-top:1px solid var(--line);text-align:center}
.prova-logos-title{color:var(--muted);font-size:.78rem;text-transform:uppercase;letter-spacing:.14em;margin:0 0 1.2rem}
.prova-logos .logos-row{filter:grayscale(1);opacity:.85;align-items:center}
.prova-logos .logos-row img{height:42px;width:auto;max-width:160px;object-fit:contain}
/* Planos */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:2rem}
@media (max-width:900px){.plans{grid-template-columns:1fr}}
.plan{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:1.8rem;box-shadow:var(--shadow-sm);position:relative;display:flex;flex-direction:column}
.plan h3{font-size:1.4rem}
.plan-price{font-size:1.6rem;color:var(--blue);font-weight:700;margin:.4rem 0 1rem}
.plan ul{list-style:none;padding:0;margin:0 0 1.5rem;flex:1}
.plan ul li{padding-left:1.4rem;position:relative;margin-bottom:.4rem;color:var(--ink-2)}
.plan ul li::before{content:"✓";position:absolute;left:0;color:var(--green);font-weight:700}
.plan .btn{margin-top:auto}
.plan-featured{border:2px solid var(--blue);box-shadow:var(--shadow)}
.ribbon{position:absolute;top:-12px;right:18px;background:var(--blue);color:#fff;font-size:.78rem;font-weight:600;padding:.3rem .6rem;border-radius:999px}
/* Badge "atendimento humanizado" */
.human-badge{
margin-top:1.6rem;
display:inline-flex;
align-items:center;
gap:.85rem;
padding:.85rem 1.1rem;
background:rgba(255,255,255,.12);
border:1px solid rgba(255,255,255,.22);
border-radius:14px;
backdrop-filter:saturate(150%) blur(6px);
max-width:fit-content;
}
.human-badge-icon{
width:38px;height:38px;
border-radius:50%;
background:rgba(255,255,255,.95);
display:inline-flex;align-items:center;justify-content:center;
font-size:1.15rem;
flex:0 0 auto;
}
.human-badge strong{display:block;color:#fff;font-size:.95rem;line-height:1.2}
.human-badge small{display:block;color:rgba(255,255,255,.85);font-size:.82rem;margin-top:.1rem}
/* CTA final */
.section-cta{background:var(--bg-cta);color:#fff;padding:5rem 0}
.section-cta h2{color:#fff}
.cta-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:3rem;align-items:center}
@media (max-width:900px){.cta-grid{grid-template-columns:1fr}}
.check-list-light li{color:#e5edff}
.check-list-light li::before{background:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.18)}
.form-card{background:#fff;color:var(--ink);border-radius:var(--radius-lg);padding:1.8rem;box-shadow:var(--shadow-lg);position:relative}
.form-card h3{margin-bottom:1rem}
.form-card label{display:block;margin-bottom:.7rem;font-size:.88rem;color:var(--muted)}
.form-card input,.form-card textarea{width:100%;padding:.7rem .9rem;margin-top:.3rem;border:1px solid var(--line);border-radius:10px;font:inherit;color:var(--ink);background:#fff;transition:.15s}
.form-card input:focus,.form-card textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px rgba(11,102,255,.15)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
@media (max-width:520px){.form-row{grid-template-columns:1fr}}
/* Thanks */
.section-thanks{padding:6rem 0;background:var(--bg-alt)}
.thanks-box{max-width:620px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:3rem;text-align:center;box-shadow:var(--shadow-sm)}
/* Footer */
.site-footer{background:#0b1220;color:#a9b8d4;padding:3rem 0 1.5rem;margin-top:3rem}
.site-footer h4,.site-footer .footer-title{color:#fff;font-size:.95rem;margin-bottom:.6rem;font-weight:600}
.site-footer ul{list-style:none;padding:0;margin:0}
.site-footer ul li{padding:.18rem 0}
.site-footer a{color:#cdd9ee}
.footer-grid{display:grid;grid-template-columns:1.5fr repeat(5,1fr);gap:1.6rem}
@media (max-width:1080px){.footer-grid{grid-template-columns:1fr 1fr 1fr}}
@media (max-width:780px){.footer-grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.footer-grid{grid-template-columns:1fr}}
.contact-info{text-align:center;color:var(--muted);font-size:.92rem;line-height:1.7;margin:-.6rem auto 1.6rem;max-width:640px}
.contact-info strong{color:var(--ink)}
.footer-address{font-style:normal;margin-top:1rem;color:#9fb0d0;font-size:.85rem;line-height:1.6}
.footer-address strong{color:#cdd9ee;font-weight:600}
.footer-bottom{margin-top:2rem;padding-top:1rem;border-top:1px solid #1e2b4a;color:#7e90b5}
/* Flash */
.flash{padding:.8rem 1rem;border-radius:10px;margin:1rem auto;max-width:780px;font-size:.92rem}
.flash-success{background:#ecfdf5;color:#0a7048;border:1px solid #c8f0d8}
.flash-error{background:#fef2f2;color:#991b1b;border:1px solid #fecaca}
.flash-info{background:#eff6ff;color:#1e40af;border:1px solid #bfdbfe}
/* Reveal animation */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
.reveal.is-visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
.reveal{opacity:1;transform:none}
}
/* ========== Cookie banner ========== */
.cookie-banner{position:fixed;left:1rem;right:1rem;bottom:1rem;z-index:90;max-width:520px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);transform:translateY(20px);opacity:0;transition:opacity .25s ease,transform .25s ease}
.cookie-banner.is-visible{transform:translateY(0);opacity:1}
.cookie-banner-inner{padding:1.1rem 1.2rem;display:flex;flex-direction:column;gap:.9rem}
.cookie-banner strong{display:block;font-size:.98rem;color:var(--ink);margin-bottom:.25rem}
.cookie-banner p{margin:0;font-size:.86rem;color:var(--muted);line-height:1.5}
.cookie-banner a{color:var(--blue);text-decoration:underline}
.cookie-banner-actions{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:flex-end}
.cookie-banner-actions .btn{padding:.55rem .9rem}
@media (min-width:720px){
/* desktop: banner no canto esquerdo pra não brigar com WhatsApp à direita */
.cookie-banner{right:auto;left:1.5rem;bottom:1.5rem;max-width:460px}
.cookie-banner-inner{flex-direction:column}
}
/* ========== WhatsApp Float (FAB minimalista) ========== */
.whatsapp-float{
position:fixed;
right:1.5rem;
bottom:1.5rem;
z-index:85;
width:54px;
height:54px;
border-radius:50%;
background:#25d366;
color:#fff;
display:inline-flex;
align-items:center;
justify-content:center;
text-decoration:none;
box-shadow:0 6px 18px rgba(0,0,0,.15);
transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
-webkit-tap-highlight-color:transparent;
}
.whatsapp-float:hover{
background:#1ebe5d;
transform:scale(1.06);
box-shadow:0 10px 24px rgba(0,0,0,.18);
text-decoration:none;
color:#fff;
}
.whatsapp-float:active{transform:scale(.96)}
.whatsapp-float:focus-visible{outline:3px solid rgba(37,211,102,.4);outline-offset:3px}
.whatsapp-float svg{display:block}
@media (max-width:520px){
.whatsapp-float{right:1rem;bottom:1rem;width:50px;height:50px}
.whatsapp-float svg{width:24px;height:24px}
}
@media (prefers-reduced-motion:reduce){
.whatsapp-float{transition:none}
.whatsapp-float:hover{transform:none}
}
/* ============================================================
REPOSICIONAMENTO ENTERPRISE - secoes novas
============================================================ */
/* Botao WhatsApp inline (CTA primario nas secoes) */
.btn-whatsapp{background:var(--whatsapp);color:#fff;display:inline-flex;align-items:center;gap:.45rem}
.btn-whatsapp:hover{background:var(--whatsapp-700);color:#fff;text-decoration:none;transform:translateY(-1px);box-shadow:0 8px 20px rgba(37,211,102,.3)}
.btn-whatsapp svg{flex:0 0 auto}
/* Botao ghost-light (sobre fundos escuros) */
.btn-ghost-light{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.4)}
.btn-ghost-light:hover{background:rgba(255,255,255,.1);color:#fff;text-decoration:none;border-color:rgba(255,255,255,.7)}
/* ============================================================
ANTES vs DEPOIS - dia a dia do sindico
============================================================ */
.ba-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;margin-top:2.4rem;align-items:stretch}
@media (max-width:780px){.ba-grid{grid-template-columns:1fr}}
.ba-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:1.8rem 1.8rem 1.6rem;box-shadow:var(--shadow-sm);transition:.2s;display:flex;flex-direction:column}
.ba-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.ba-card-before{border-top:4px solid #ef4444}
.ba-card-after{border-top:4px solid #22c55e;background:linear-gradient(180deg,#fff 0%,var(--green-50) 250%)}
.ba-head{margin-bottom:1.1rem}
.ba-label{display:inline-block;font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#ef4444;background:#fef2f2;padding:.32rem .65rem;border-radius:6px;margin-bottom:.65rem}
.ba-label-after{color:#0a7048;background:#ecfdf5}
.ba-head h3{font-size:1.15rem;color:var(--ink);margin:0;line-height:1.3;font-weight:700}
.ba-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.6rem}
.ba-list li{position:relative;padding-left:1.7rem;color:var(--ink-2);font-size:.95rem;line-height:1.45}
.ba-list li::before{content:"×";position:absolute;left:0;top:-.05rem;width:18px;height:18px;border-radius:50%;background:#fef2f2;color:#ef4444;display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:.85rem}
.ba-list-after li::before{content:"";background:#ecfdf5}
.ba-list-after li::after{content:"";position:absolute;left:5px;top:.4rem;width:7px;height:4px;border-left:2px solid #22c55e;border-bottom:2px solid #22c55e;transform:rotate(-45deg)}
/* ============================================================
MONITORAMENTO CONSTANTE - secao dark com manifesto
============================================================ */
.mon-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:2.4rem}
@media (max-width:880px){.mon-grid{grid-template-columns:1fr}}
.mon-card{
background:linear-gradient(160deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
border:1px solid rgba(168,196,255,.15);
border-radius:18px;
padding:1.6rem 1.7rem;
transition:.25s;
}
.mon-card:hover{
border-color:rgba(168,196,255,.35);
transform:translateY(-3px);
box-shadow:0 14px 30px rgba(0,0,0,.2);
}
.mon-icon{
width:44px;height:44px;
border-radius:12px;
background:linear-gradient(135deg, var(--blue), var(--blue-700));
color:#fff;
display:inline-flex;
align-items:center;
justify-content:center;
margin-bottom:.9rem;
box-shadow:0 6px 14px rgba(31,79,209,.4);
}
.mon-card h3{color:#fff;font-size:1.1rem;margin-bottom:.45rem;line-height:1.3;font-weight:700}
.mon-card p{margin:0;color:#a9b8d4;line-height:1.55;font-size:.92rem}
.mon-quote{
margin-top:2.4rem;
text-align:center;
position:relative;
max-width:760px;
margin-left:auto;margin-right:auto;
padding:1.4rem 1.6rem 1.4rem 3.2rem;
background:rgba(255,255,255,.04);
border:1px solid rgba(168,196,255,.12);
border-radius:18px;
}
.mon-quote-mark{
position:absolute;
top:.4rem;left:1rem;
font-size:4rem;
font-family:Georgia,serif;
color:rgba(168,196,255,.35);
line-height:1;
font-weight:700;
}
.mon-quote p{margin:0;color:#fff;font-size:1.15rem;line-height:1.5;text-align:left}
.mon-quote strong{color:#3ddc97;font-weight:700}
@media (max-width:580px){
.mon-quote{padding:2.4rem 1.4rem 1.2rem;text-align:center}
.mon-quote p{text-align:center;font-size:1rem}
.mon-quote-mark{top:.5rem;left:50%;transform:translateX(-50%)}
}
/* PROBLEMA - 3 cards lado a lado */
.problem-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:2.4rem;align-items:stretch}
@media (max-width:680px){.problem-grid{grid-template-columns:1fr}}
.problem-item{
position:relative;
background:#fff;
border:1px solid var(--line);
border-top:4px solid var(--blue);
border-radius:var(--radius-lg);
padding:1.5rem 1.5rem 1.6rem;
box-shadow:var(--shadow-sm);
transition:.2s;
display:flex;
flex-direction:column;
}
.problem-item:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--blue-100);border-top-color:var(--blue)}
.problem-item h3{color:var(--ink);font-size:1.1rem;margin-bottom:.5rem;font-weight:700;line-height:1.3}
.problem-item p{margin:0;color:var(--muted);line-height:1.55;font-size:.92rem}
/* SOLUCAO - imagem responsiva (A-Solucao-Nivix.webp)
Largura alinhada ao wrapper .features-section (full container width) */
.highlight-blue{color:var(--blue)}
.solucao-figura{margin:2rem auto 1.2rem;padding:0;text-align:center;max-width:100%}
.solucao-figura picture{display:block}
.solucao-figura img{
display:block;
width:100%;
height:auto;
max-height:none;
object-fit:cover;
margin:0 auto;
border-radius:32px;
box-shadow:0 20px 50px -15px rgba(9,17,40,.18);
}
/* ============================================================
FEATURES PREMIUM - 6 cards enterprise SaaS
Dark wrapper com glow azul, cards translucidos, mini-visuais
============================================================ */
.features-section{
margin-top:2rem;
position:relative;
background:
radial-gradient(ellipse 80% 60% at 50% 0%, rgba(31,79,209,.18), transparent 70%),
linear-gradient(180deg, #061a4a 0%, #0a2a73 100%);
border-radius:32px;
padding:3rem 2.5rem;
overflow:hidden;
box-shadow:0 30px 80px -20px rgba(6,26,74,.4);
}
.features-section::before{
content:"";
position:absolute;
inset:0;
background:
radial-gradient(circle at 20% 30%, rgba(61,220,151,.08), transparent 40%),
radial-gradient(circle at 80% 70%, rgba(31,79,209,.18), transparent 50%);
pointer-events:none;
}
.features-section::after{
/* fina linha brilhante no topo */
content:"";
position:absolute;
top:0;left:50%;
width:60%;height:1px;
background:linear-gradient(90deg,transparent,rgba(168,196,255,.5),transparent);
transform:translateX(-50%);
}
@media (max-width:680px){
.features-section{padding:2rem 1.2rem;border-radius:22px}
}
.features-section-head{text-align:center;margin-bottom:2.4rem;position:relative;z-index:1}
.features-eyebrow{
display:inline-block;
font-size:.72rem;
font-weight:700;
letter-spacing:.18em;
color:#a8c4ff;
background:rgba(168,196,255,.08);
border:1px solid rgba(168,196,255,.15);
padding:.4rem .9rem;
border-radius:999px;
margin-bottom:1rem;
}
.features-section-head h3{
font-size:clamp(1.5rem,3vw,2rem);
font-weight:700;
color:#fff;
margin:0;
letter-spacing:-.01em;
line-height:1.25;
}
/* Grid 3x2 (desktop) -> 2x3 (tablet) -> 1col (mobile) */
.features-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:1.4rem;
position:relative;
z-index:1;
}
@media (max-width:1080px){.features-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.features-grid{grid-template-columns:1fr;gap:1rem}}
/* Card individual */
.feature-card{
position:relative;
background:linear-gradient(160deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.02) 100%);
border:1px solid rgba(168,196,255,.15);
border-radius:20px;
padding:1.4rem 1.5rem 1.6rem;
backdrop-filter:blur(8px);
-webkit-backdrop-filter:blur(8px);
display:flex;
flex-direction:column;
gap:.7rem;
transition:transform .35s cubic-bezier(.22,.61,.36,1), border-color .25s, box-shadow .35s;
overflow:hidden;
isolation:isolate;
/* entrada animada baseada em --feat-delay */
animation:feat-fade-up .6s cubic-bezier(.22,.61,.36,1) both;
animation-delay:var(--feat-delay,0ms);
}
.feature-card:hover{
transform:translateY(-6px);
border-color:rgba(168,196,255,.4);
box-shadow:0 20px 50px -10px rgba(31,79,209,.4);
}
.feature-card:hover .feature-card-glow{opacity:1}
.feature-card:hover .feature-icon{transform:scale(1.08) rotate(-3deg)}
@keyframes feat-fade-up{
from{opacity:0;transform:translateY(20px)}
to{opacity:1;transform:translateY(0)}
}
@media (prefers-reduced-motion:reduce){
.feature-card{animation:none;transition:none}
.feature-card:hover{transform:none}
}
/* Glow azul que aparece no hover */
.feature-card-glow{
position:absolute;
top:-50%;left:-50%;
width:200%;height:200%;
background:radial-gradient(circle at center, rgba(31,79,209,.25), transparent 50%);
opacity:0;
transition:opacity .35s;
pointer-events:none;
z-index:-1;
}
/* Numero no canto superior direito */
.feature-num{
position:absolute;
top:1.1rem;right:1.3rem;
font-size:.78rem;
font-weight:700;
letter-spacing:.1em;
color:rgba(168,196,255,.5);
font-feature-settings:"tnum";
}
/* Visual area no topo do card */
.feature-visual{
height:120px;
margin:-.4rem -.5rem .4rem;
border-radius:12px;
background:linear-gradient(135deg, rgba(10,42,115,.6), rgba(6,26,74,.8));
border:1px solid rgba(168,196,255,.12);
padding:.85rem;
position:relative;
overflow:hidden;
display:flex;
}
/* Icon */
.feature-icon{
width:46px;height:46px;
border-radius:12px;
background:linear-gradient(135deg, var(--blue), var(--blue-700));
color:#fff;
display:inline-flex;
align-items:center;
justify-content:center;
box-shadow:0 8px 18px rgba(31,79,209,.4), inset 0 1px 0 rgba(255,255,255,.2);
transition:transform .3s cubic-bezier(.22,.61,.36,1);
}
.feature-card>h3{
font-size:1.12rem;
font-weight:700;
color:#fff;
margin:0;
letter-spacing:-.01em;
line-height:1.3;
}
.feature-card>p{
margin:0;
color:#cdd9ee;
font-size:.92rem;
line-height:1.55;
}
.feature-benefits{
list-style:none;
padding:0;
margin:.4rem 0 0;
display:flex;
flex-direction:column;
gap:.4rem;
}
.feature-benefits li{
position:relative;
padding-left:1.4rem;
color:#a9b8d4;
font-size:.86rem;
line-height:1.4;
}
.feature-benefits li::before{
content:"";
position:absolute;
left:0;top:.4rem;
width:14px;height:14px;
border-radius:50%;
background:rgba(61,220,151,.18);
border:1.5px solid #3ddc97;
}
.feature-benefits li::after{
content:"";
position:absolute;
left:4px;top:.65rem;
width:6px;height:3px;
border-left:1.5px solid #3ddc97;
border-bottom:1.5px solid #3ddc97;
transform:rotate(-45deg);
}
/* ============================================================
MINI VISUAIS (CSS art) por feature
============================================================ */
/* 01 - Mini chart de barras (consumo por unidade) */
.feature-visual-chart{flex-direction:column;justify-content:flex-end;gap:.3rem}
.fv-chart-bars{display:flex;align-items:flex-end;justify-content:space-between;height:60px;gap:5px}
.fv-chart-bars span{
flex:1;
background:linear-gradient(to top, var(--blue), #6394ff);
border-radius:3px 3px 0 0;
min-height:6px;
box-shadow:0 0 12px rgba(31,79,209,.5);
}
.fv-chart-foot{display:flex;justify-content:space-between;color:rgba(168,196,255,.55);font-size:.65rem;font-feature-settings:"tnum"}
/* 02 - Polaroid do hidrometro com GPS + QR */
.feature-visual-photo{justify-content:space-between;gap:.6rem;align-items:stretch}
.fv-photo-frame{
flex:1;
background:#0a2046;
border:1px solid rgba(168,196,255,.2);
border-radius:8px;
padding:.5rem;
display:flex;
flex-direction:column;
justify-content:space-between;
}
.fv-photo-meter{
background:#091128;
color:#3ddc97;
font-family:"Courier New",monospace;
font-size:.85rem;
font-weight:700;
text-align:center;
padding:.35rem;
border-radius:4px;
letter-spacing:.12em;
text-shadow:0 0 6px rgba(61,220,151,.5);
border:1px solid rgba(61,220,151,.3);
}
.fv-photo-meta{display:flex;flex-direction:column;gap:.15rem;margin-top:.35rem}
.fv-photo-meta span{font-size:.6rem;color:#a8c4ff;line-height:1.2}
.fv-photo-qr{
width:54px;
background:#fff;
color:#091128;
font-family:"Courier New",monospace;
font-size:.5rem;
line-height:.9;
padding:.35rem;
border-radius:6px;
text-align:center;
display:flex;
align-items:center;
justify-content:center;
letter-spacing:1px;
}
/* 03 - Timeline historico mensal */
.feature-visual-timeline{flex-direction:column;justify-content:center;gap:.35rem;padding:.85rem 1rem}
.fv-tl-row{
display:flex;
align-items:center;
gap:.6rem;
padding:.3rem 0;
border-bottom:1px solid rgba(168,196,255,.08);
}
.fv-tl-row:last-child{border-bottom:0}
.fv-tl-dot{
width:8px;height:8px;
border-radius:50%;
background:var(--blue);
box-shadow:0 0 8px rgba(31,79,209,.6);
flex:0 0 auto;
}
.fv-tl-row strong{font-size:.7rem;color:#cdd9ee;font-weight:600;width:24px}
.fv-tl-row em{margin-left:auto;font-style:normal;font-size:.7rem;color:#3ddc97;font-family:"Courier New",monospace;font-weight:700}
/* 04 - Dashboard 2x2 mini-tiles */
.feature-visual-dash{flex-wrap:wrap;gap:.4rem;padding:.7rem}
.fv-dash-tile{
flex:1 1 calc(50% - .2rem);
background:rgba(168,196,255,.06);
border:1px solid rgba(168,196,255,.12);
border-radius:6px;
padding:.4rem .5rem;
min-width:0;
}
.fv-dash-tile small{display:block;font-size:.55rem;color:#a8c4ff;text-transform:uppercase;letter-spacing:.08em;line-height:1}
.fv-dash-tile strong{display:block;color:#fff;font-size:.85rem;margin-top:.2rem;font-feature-settings:"tnum"}
.fv-dash-tile-accent{background:linear-gradient(135deg,rgba(61,220,151,.2),rgba(34,197,94,.1));border-color:rgba(61,220,151,.3)}
.fv-dash-tile-accent strong{color:#3ddc97;font-size:1.1rem}
/* 05 - Recibo termico estilo */
.feature-visual-receipt{justify-content:center;align-items:center;padding:.5rem}
.fv-receipt{
background:#fff;
color:#091128;
font-family:"Courier New",monospace;
font-size:.55rem;
border-radius:4px;
padding:.5rem .6rem;
width:100%;
max-width:160px;
position:relative;
box-shadow:0 4px 12px rgba(0,0,0,.3);
/* serrilhado embaixo */
}
.fv-receipt::after{
content:"";
position:absolute;
bottom:-4px;left:0;right:0;
height:4px;
background:radial-gradient(circle at 4px center, transparent 0 2px, #fff 2.5px) 0 0/8px 100%;
}
.fv-receipt-head{text-align:center;font-weight:700;letter-spacing:.05em;border-bottom:1px dashed #aaa;padding-bottom:.2rem;margin-bottom:.2rem;font-size:.55rem}
.fv-receipt-row{display:flex;justify-content:space-between;line-height:1.4}
.fv-receipt-row strong{font-weight:700}
.fv-receipt-qr{margin-top:.25rem;text-align:center;font-size:.4rem;line-height:.9;letter-spacing:1px}
/* 06 - Tank com sensor */
.feature-visual-sensor{justify-content:space-between;gap:.6rem;align-items:stretch;padding:.7rem}
.fv-tank{
position:relative;
width:46px;
background:linear-gradient(180deg, transparent 0%, transparent 13%, rgba(168,196,255,.06) 13%);
border:2px solid rgba(168,196,255,.4);
border-radius:6px 6px 8px 8px;
flex:0 0 46px;
overflow:hidden;
display:flex;
flex-direction:column;
justify-content:flex-end;
}
.fv-tank-water{
height:65%;
background:linear-gradient(180deg, var(--blue) 0%, #0a2a73 100%);
border-radius:0 0 4px 4px;
position:relative;
overflow:hidden;
}
.fv-tank-water::before{
content:"";
position:absolute;
top:0;left:-10%;right:-10%;
height:6px;
background:rgba(255,255,255,.2);
border-radius:50%;
animation:wave 3s ease-in-out infinite;
}
@keyframes wave{
0%,100%{transform:translateY(0)}
50%{transform:translateY(2px)}
}
.fv-tank-pulse{
position:absolute;
top:-2px;right:-2px;
width:8px;height:8px;
border-radius:50%;
background:#3ddc97;
box-shadow:0 0 0 0 rgba(61,220,151,.7);
animation:tank-pulse 2s ease-out infinite;
}
.fv-tank-pulse-2{animation-delay:1s}
@keyframes tank-pulse{
0%{box-shadow:0 0 0 0 rgba(61,220,151,.6)}
100%{box-shadow:0 0 0 8px rgba(61,220,151,0)}
}
.fv-tank-level{
position:absolute;
top:50%;left:50%;
transform:translate(-50%,-50%);
color:#fff;
font-size:.7rem;
font-weight:700;
text-shadow:0 1px 2px rgba(0,0,0,.6);
}
.fv-tank-stats{display:flex;flex-direction:column;justify-content:center;gap:.35rem;flex:1}
.fv-tank-stats span{display:flex;align-items:center;gap:.4rem;font-size:.65rem;color:#cdd9ee}
.fv-tank-stats i{display:inline-block;width:7px;height:7px;border-radius:50%;background:#3ddc97;box-shadow:0 0 6px rgba(61,220,151,.6)}
.fv-tank-stats i.warn{background:#fbbf24;box-shadow:0 0 6px rgba(251,191,36,.6)}
/* 06 - Dossiê de provas (apoio técnico/documental) */
.feature-visual-legal{align-items:stretch;padding:.7rem}
.fv-legal-doc{
flex:1;
display:flex;
flex-direction:column;
gap:.32rem;
background:#0a2046;
border:1px solid rgba(168,196,255,.2);
border-radius:8px;
padding:.55rem .65rem;
}
.fv-legal-doc-head{
display:flex;
align-items:center;
justify-content:space-between;
gap:.4rem;
font-size:.6rem;
font-weight:700;
letter-spacing:.05em;
color:#a8c4ff;
padding-bottom:.32rem;
border-bottom:1px dashed rgba(168,196,255,.2);
}
.fv-legal-stamp{
flex:0 0 auto;
background:rgba(61,220,151,.15);
border:1px solid rgba(61,220,151,.45);
color:#3ddc97;
border-radius:4px;
padding:.1rem .35rem;
font-size:.55rem;
letter-spacing:.06em;
transform:rotate(-3deg);
}
.fv-legal-row{
display:flex;
align-items:center;
justify-content:space-between;
gap:.4rem;
font-size:.62rem;
color:#cdd9ee;
line-height:1.3;
}
.fv-legal-row i{font-style:normal;color:#3ddc97;font-weight:700;font-size:.72rem}
/* ============================================================
SEGURANÇA PARA QUEM ADMINISTRA - grid de selos de confiança
============================================================ */
.trust-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:2.4rem}
@media (max-width:780px){.trust-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.trust-grid{grid-template-columns:1fr}}
.trust-item{
display:flex;align-items:center;gap:.85rem;
background:#fff;border:1px solid var(--line);border-radius:var(--radius);
padding:1rem 1.2rem;box-shadow:var(--shadow-sm);
font-weight:600;color:var(--ink);font-size:.98rem;line-height:1.3;transition:.2s;
}
.trust-item:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--blue-100)}
.trust-check{
flex:0 0 auto;width:32px;height:32px;border-radius:50%;
background:var(--green-50);color:var(--green-700);
display:inline-flex;align-items:center;justify-content:center;
box-shadow:0 0 0 4px rgba(34,197,94,.1);
}
/* ============================================================
SOBRE / QUEM SOMOS - texto institucional
============================================================ */
.about-text{max-width:760px;margin:0 auto}
.about-text p{color:var(--ink-2);font-size:1.05rem;line-height:1.75;margin:0 0 1.1em}
.about-text p:last-child{margin-bottom:0}
.about-subhead{text-align:center;font-size:1.3rem;color:var(--ink);margin:2.8rem 0 1.4rem;font-weight:700}
/* ============================================================
PÁGINAS DE SEO (landing pages temáticas)
============================================================ */
.seo-head{margin-bottom:1.4rem}
.seo-head h1{font-size:clamp(1.9rem,3.4vw,2.8rem);margin:.3rem 0 0;line-height:1.18}
.seo-actions{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.8rem}
/* grid de benefícios que se adapta a 3, 4 ou 6 itens sem sobras */
.seo-benefits{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.4rem;margin-top:2.4rem}
/* ============================================================
ALINHAMENTO DE TEXTO — parágrafos longos justificados.
Títulos, subtítulos curtos e CTAs permanecem centralizados.
============================================================ */
.about-text p,
.faq-answer, .faq-answer p,
.legal-section p,
#agua-gas .section-head .muted,
#seguranca .section-head .muted,
#atendimento-nacional .section-head .muted,
#agua-gas .audience-card p,
#sobre .audience-card p,
.features-section .feature-card > p{
text-align:justify;
text-justify:inter-word;
hyphens:auto;
}
/* Em telas estreitas o justificado abre buracos entre palavras: volta à esquerda */
@media (max-width:480px){
.about-text p,.faq-answer,.faq-answer p,.legal-section p,
#agua-gas .section-head .muted,#seguranca .section-head .muted,
#atendimento-nacional .section-head .muted,
#agua-gas .audience-card p,#sobre .audience-card p,
.features-section .feature-card > p{text-align:left;hyphens:manual}
}
/* Screenshot real do painel (seção Monitoramento, fundo escuro) */
.dash-figura{margin:0 auto 2.6rem;padding:0;text-align:center;max-width:100%}
.dash-figura img{
display:block;width:100%;height:auto;margin:0 auto;
border-radius:18px;
border:1px solid rgba(168,196,255,.18);
box-shadow:0 30px 70px -20px rgba(0,0,0,.55);
}
/* ============================================================
PROOF PREMIUM - 4 cards SaaS enterprise (2x2)
Mesmo padrao visual da .features-section
============================================================ */
.proof-section{
margin-top:2rem;
position:relative;
background:
radial-gradient(ellipse 80% 60% at 50% 0%, rgba(31,79,209,.18), transparent 70%),
linear-gradient(180deg, #061a4a 0%, #0a2a73 100%);
border-radius:32px;
padding:3rem 2.5rem;
overflow:hidden;
box-shadow:0 30px 80px -20px rgba(6,26,74,.4);
}
.proof-section::before{
content:"";
position:absolute;
inset:0;
background:
radial-gradient(circle at 15% 25%, rgba(61,220,151,.08), transparent 40%),
radial-gradient(circle at 85% 75%, rgba(31,79,209,.18), transparent 50%);
pointer-events:none;
}
.proof-section::after{
content:"";
position:absolute;
top:0;left:50%;
width:60%;height:1px;
background:linear-gradient(90deg,transparent,rgba(168,196,255,.5),transparent);
transform:translateX(-50%);
}
@media (max-width:680px){.proof-section{padding:2rem 1.2rem;border-radius:22px}}
.proof-section-head{text-align:center;margin-bottom:2.4rem;position:relative;z-index:1}
.proof-eyebrow{
display:inline-block;
font-size:.72rem;
font-weight:700;
letter-spacing:.18em;
color:#a8c4ff;
background:rgba(168,196,255,.08);
border:1px solid rgba(168,196,255,.15);
padding:.4rem .9rem;
border-radius:999px;
margin-bottom:1rem;
}
.proof-section-head h3{
font-size:clamp(1.5rem,3vw,2rem);
font-weight:700;
color:#fff;
margin:0;
letter-spacing:-.01em;
line-height:1.25;
}
/* Grid 2x2 desktop -> 1col mobile */
.proof-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:1.4rem;
position:relative;
z-index:1;
}
@media (max-width:780px){.proof-grid{grid-template-columns:1fr;gap:1rem}}
.proof-card{
position:relative;
background:linear-gradient(160deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.02) 100%);
border:1px solid rgba(168,196,255,.15);
border-radius:20px;
padding:1.6rem 1.7rem 1.8rem;
backdrop-filter:blur(8px);
-webkit-backdrop-filter:blur(8px);
display:flex;
flex-direction:column;
gap:.85rem;
transition:transform .35s cubic-bezier(.22,.61,.36,1), border-color .25s, box-shadow .35s;
overflow:hidden;
isolation:isolate;
animation:feat-fade-up .6s cubic-bezier(.22,.61,.36,1) both;
animation-delay:var(--feat-delay,0ms);
}
.proof-card:hover{
transform:translateY(-6px);
border-color:rgba(168,196,255,.4);
box-shadow:0 20px 50px -10px rgba(31,79,209,.4);
}
.proof-card:hover .proof-card-glow{opacity:1}
.proof-card:hover .proof-icon{transform:scale(1.08) rotate(-3deg)}
.proof-card-glow{
position:absolute;
top:-50%;left:-50%;
width:200%;height:200%;
background:radial-gradient(circle at center, rgba(31,79,209,.25), transparent 50%);
opacity:0;
transition:opacity .35s;
pointer-events:none;
z-index:-1;
}
.proof-num{
position:absolute;
top:1.2rem;right:1.5rem;
font-size:.78rem;
font-weight:700;
letter-spacing:.1em;
color:rgba(168,196,255,.5);
font-feature-settings:"tnum";
}
/* Visual mockup area */
.proof-visual{
height:170px;
margin:-.4rem -.5rem .4rem;
border-radius:14px;
background:linear-gradient(135deg, rgba(10,42,115,.7), rgba(6,26,74,.85));
border:1px solid rgba(168,196,255,.12);
padding:1rem;
position:relative;
overflow:hidden;
display:flex;
}
.proof-icon{
width:46px;height:46px;
border-radius:12px;
background:linear-gradient(135deg, var(--blue), var(--blue-700));
color:#fff;
display:inline-flex;
align-items:center;
justify-content:center;
box-shadow:0 8px 18px rgba(31,79,209,.4), inset 0 1px 0 rgba(255,255,255,.2);
transition:transform .3s cubic-bezier(.22,.61,.36,1);
}
.proof-card>h3{
font-size:1.18rem;
font-weight:700;
color:#fff;
margin:0;
letter-spacing:-.01em;
line-height:1.3;
}
.proof-card>p{
margin:0;
color:#cdd9ee;
font-size:.95rem;
line-height:1.55;
}
.proof-benefits{
list-style:none;
padding:0;
margin:.4rem 0 0;
display:flex;
flex-wrap:wrap;
gap:.45rem .8rem;
}
.proof-benefits li{
position:relative;
padding-left:1.2rem;
color:#a9b8d4;
font-size:.86rem;
line-height:1.4;
}
.proof-benefits li::before{
content:"";
position:absolute;
left:0;top:.4rem;
width:12px;height:12px;
border-radius:50%;
background:rgba(61,220,151,.18);
border:1.5px solid #3ddc97;
}
.proof-benefits li::after{
content:"";
position:absolute;
left:3px;top:.6rem;
width:5px;height:3px;
border-left:1.5px solid #3ddc97;
border-bottom:1.5px solid #3ddc97;
transform:rotate(-45deg);
}
/* ============================================================
MINI VISUAIS DA PROVA (4)
============================================================ */
/* 01 - Foto vinculada (display LCD verde + 3 badges) */
.proof-visual-photo{flex-direction:row;gap:.8rem;align-items:center}
.pv-meter{
flex:0 0 130px;
background:#091128;
border:1.5px solid rgba(61,220,151,.4);
border-radius:8px;
padding:.65rem .5rem;
text-align:center;
box-shadow:inset 0 0 12px rgba(0,0,0,.5),0 0 18px rgba(61,220,151,.2);
}
.pv-meter-display{
color:#3ddc97;
font-family:"Courier New",monospace;
font-size:1.1rem;
font-weight:700;
letter-spacing:.12em;
text-shadow:0 0 8px rgba(61,220,151,.7);
line-height:1;
}
.pv-meter-unit{
color:#3ddc97;
font-family:"Courier New",monospace;
font-size:.7rem;
margin-top:.3rem;
opacity:.7;
}
.pv-badges{display:flex;flex-direction:column;gap:.35rem;flex:1}
.pv-badge{
display:inline-flex;
align-items:center;
gap:.4rem;
background:rgba(168,196,255,.08);
border:1px solid rgba(168,196,255,.18);
border-radius:6px;
padding:.3rem .55rem;
font-size:.7rem;
color:#cdd9ee;
font-weight:500;
white-space:nowrap;
}
.pv-badge-success{background:rgba(61,220,151,.12);border-color:rgba(61,220,151,.4);color:#3ddc97}
.pv-dot{width:5px;height:5px;border-radius:50%;background:currentColor;display:inline-block;flex:0 0 auto}
.pv-dot-blue{color:#a8c4ff}
/* 02 - Smartphone com app de leitura */
.proof-visual-mobile{justify-content:center;align-items:center;padding:.6rem}
.pv-phone{
width:160px;
background:#091128;
border:1.5px solid rgba(168,196,255,.3);
border-radius:14px;
padding:.5rem .4rem;
position:relative;
box-shadow:0 8px 20px rgba(0,0,0,.4);
}
.pv-phone-notch{
position:absolute;
top:.45rem;left:50%;
transform:translateX(-50%);
width:30px;height:4px;
background:rgba(0,0,0,.6);
border-radius:2px;
}
.pv-phone-bar{
background:var(--blue);
color:#fff;
font-size:.6rem;
font-weight:700;
padding:.35rem .5rem;
border-radius:6px;
margin-top:.7rem;
display:flex;
align-items:center;
justify-content:space-between;
}
.pv-online{
width:6px;height:6px;
border-radius:50%;
background:#3ddc97;
box-shadow:0 0 8px rgba(61,220,151,.8);
display:inline-block;
animation:pv-online-pulse 2s ease-in-out infinite;
}
@keyframes pv-online-pulse{0%,100%{opacity:1}50%{opacity:.4}}
.pv-phone-rows{display:flex;flex-direction:column;gap:.15rem;margin-top:.4rem}
.pv-phone-row{
display:flex;
justify-content:space-between;
font-size:.6rem;
padding:.25rem .4rem;
border-radius:4px;
color:#cdd9ee;
}
.pv-phone-row strong{font-family:"Courier New",monospace;font-weight:700}
.pv-phone-row.done{color:#a8c4ff}
.pv-phone-row.done strong{color:#3ddc97}
.pv-phone-row.active{background:rgba(31,79,209,.4);border-left:2px solid #6394ff;color:#fff}
.pv-phone-row.active strong{color:#fff}
.pv-phone-row.pending strong{color:rgba(168,196,255,.4)}
.pv-phone-foot{
margin-top:.4rem;
padding:.3rem .5rem;
font-size:.55rem;
color:#a8c4ff;
display:flex;
align-items:center;
gap:.3rem;
}
.pv-sync{
width:8px;height:8px;
border:1.5px solid #a8c4ff;
border-top-color:transparent;
border-radius:50%;
display:inline-block;
animation:pv-spin 1s linear infinite;
}
@keyframes pv-spin{to{transform:rotate(360deg)}}
/* 03 - Recibo termico moderno */
.proof-visual-receipt{justify-content:center;align-items:flex-start;padding:.6rem;position:relative}
.pv-ticket{
background:#fff;
color:#091128;
font-family:"Courier New",monospace;
font-size:.55rem;
border-radius:4px;
padding:.55rem .65rem .9rem;
width:100%;
max-width:170px;
position:relative;
box-shadow:0 6px 16px rgba(0,0,0,.4);
}
.pv-ticket::after{
content:"";
position:absolute;
bottom:-5px;left:0;right:0;
height:5px;
background:radial-gradient(circle at 4px center, transparent 0 2.5px, #fff 3px) 0 0/8px 100%;
}
.pv-ticket-head{text-align:center;font-weight:700;letter-spacing:.05em;border-bottom:1px dashed #aaa;padding-bottom:.25rem;margin-bottom:.3rem;font-size:.55rem}
.pv-ticket-row{display:flex;justify-content:space-between;line-height:1.5}
.pv-ticket-row strong{font-weight:700;color:#0a2a73}
.pv-ticket-qr{margin-top:.4rem;text-align:center;font-size:.42rem;line-height:.95;letter-spacing:1px}
.pv-ticket-id{text-align:center;font-size:.5rem;color:#666;margin-top:.2rem}
.pv-stamp{
position:absolute;
top:.7rem;right:.7rem;
background:#3ddc97;
color:#091128;
font-size:.65rem;
font-weight:800;
padding:.3rem .55rem;
border-radius:6px;
display:inline-flex;
align-items:center;
gap:.3rem;
letter-spacing:.04em;
text-transform:uppercase;
transform:rotate(8deg);
box-shadow:0 4px 12px rgba(61,220,151,.4);
}
/* 04 - Dashboard real */
.proof-visual-dashboard{padding:.7rem}
.pv-dash{width:100%;display:flex;flex-direction:column;gap:.45rem;position:relative}
.pv-dash-tabs{display:flex;gap:.4rem;font-size:.6rem;color:#a8c4ff}
.pv-dash-tabs span{padding:.18rem .45rem;border-radius:4px;border:1px solid transparent}
.pv-dash-tabs span.active{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(168,196,255,.2)}
.pv-dash-chart{height:48px;background:rgba(168,196,255,.04);border-radius:6px;padding:.2rem;border:1px solid rgba(168,196,255,.1)}
.pv-dash-chart svg{width:100%;height:100%;display:block}
.pv-dash-rank{display:flex;flex-direction:column;gap:.25rem}
.pv-dash-rank-row{display:flex;align-items:center;gap:.5rem;font-size:.6rem;color:#cdd9ee}
.pv-dash-rank-row span{flex:0 0 60px}
.pv-dash-rank-row i{flex:1;display:block;height:5px;background:linear-gradient(90deg,var(--blue),#6394ff);border-radius:3px;box-shadow:0 0 8px rgba(31,79,209,.4)}
.pv-dash-alert{
position:absolute;
bottom:0;right:0;
background:rgba(251,191,36,.18);
border:1px solid rgba(251,191,36,.4);
color:#fbbf24;
font-size:.55rem;
font-weight:700;
padding:.18rem .4rem;
border-radius:4px;
letter-spacing:.04em;
}
/* Pilares - 3 cards enterprise lado a lado */
.pilares-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:1.2rem;
margin-top:1.6rem;
align-items:stretch;
}
@media (max-width:780px){.pilares-grid{grid-template-columns:1fr;gap:.9rem}}
.pilar-card{
position:relative;
background:#fff;
border:1px solid var(--line);
border-radius:16px;
padding:1.4rem 1.5rem 0;
box-shadow:0 2px 6px rgba(9,17,40,.04);
transition:.22s ease;
display:flex;
flex-direction:column;
overflow:hidden;
}
.pilar-card::before{
content:"";
position:absolute;
top:0;left:0;right:0;
height:4px;
background:linear-gradient(90deg,var(--blue-700),var(--blue));
}
.pilar-card:hover{
transform:translateY(-4px);
box-shadow:0 18px 36px rgba(10,42,115,.12);
border-color:var(--blue-100);
}
.pilar-card-head{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:1rem;
}
.pilar-num{
background:var(--blue-700);
color:#fff;
font-size:.95rem;
font-weight:700;
width:42px;height:42px;
border-radius:50%;
display:inline-flex;
align-items:center;
justify-content:center;
letter-spacing:.02em;
box-shadow:0 6px 14px rgba(10,42,115,.25);
}
.pilar-icon{
width:38px;height:38px;
border-radius:50%;
background:var(--blue-50);
color:var(--blue);
display:inline-flex;
align-items:center;
justify-content:center;
}
.pilar-card h3{
font-size:1.18rem;
font-weight:700;
color:var(--ink);
margin:0 0 .55rem;
line-height:1.25;
letter-spacing:-.01em;
}
.pilar-card>p{
margin:0 0 1.3rem;
color:var(--muted);
font-size:.95rem;
line-height:1.55;
flex:1;
}
.pilar-card-foot{
margin:0 -1.5rem 0;
padding:.85rem 1.4rem;
background:linear-gradient(135deg,var(--blue-700),var(--blue));
color:#fff;
font-size:.82rem;
font-weight:600;
letter-spacing:.01em;
text-align:center;
line-height:1.4;
}
/* Banner final enterprise */
.pilares-banner{
margin-top:1.6rem;
display:flex;
align-items:center;
justify-content:center;
gap:.85rem;
background:linear-gradient(135deg,var(--blue-900) 0%,var(--blue-700) 100%);
color:#fff;
border-radius:16px;
padding:1.2rem 1.8rem;
text-align:left;
box-shadow:0 14px 30px rgba(10,42,115,.2);
position:relative;
overflow:hidden;
}
.pilares-banner::before{
content:"";
position:absolute;
top:0;left:0;
width:6px;height:100%;
background:linear-gradient(180deg,#3ddc97,#22c55e);
}
.pilares-banner-icon{
flex:0 0 auto;
width:44px;height:44px;
border-radius:12px;
background:rgba(255,255,255,.12);
color:#a8c4ff;
display:inline-flex;
align-items:center;
justify-content:center;
}
.pilares-banner p{
margin:0;
font-size:1rem;
line-height:1.45;
}
.pilares-banner strong{
color:#fff;
font-weight:700;
}
@media (max-width:580px){
.pilares-banner{flex-direction:column;text-align:center;padding:1.2rem 1rem}
.pilares-banner::before{width:100%;height:5px}
.pilares-banner p{font-size:.92rem}
}
/* Conteudo textual oculto visualmente, ainda lido por SEO/screen-readers */
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* (estilos antigos dos cards mantidos abaixo se voltarem a ser usados) */
.solucao-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;margin-top:2.4rem}
@media (max-width:880px){.solucao-grid{grid-template-columns:1fr}}
.solucao-item{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:1.6rem 1.7rem 0;box-shadow:var(--shadow-sm);transition:.2s;display:flex;flex-direction:column;overflow:hidden;position:relative}
.solucao-item:hover{box-shadow:var(--shadow);transform:translateY(-3px)}
.solucao-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.1rem;margin-top:-.4rem}
.solucao-num{
background:var(--blue-700);
color:#fff;
font-size:.95rem;
font-weight:700;
width:42px;
height:42px;
border-radius:50%;
display:inline-flex;
align-items:center;
justify-content:center;
letter-spacing:.02em;
box-shadow:0 6px 14px rgba(10,42,115,.25);
}
.solucao-icon{
width:42px;
height:42px;
border-radius:50%;
background:var(--blue-50);
color:var(--blue);
display:inline-flex;
align-items:center;
justify-content:center;
}
.solucao-item h3{font-size:1.2rem;margin-bottom:.5rem;color:var(--ink)}
.solucao-item p{margin:0 0 1.4rem;color:var(--muted);line-height:1.55;flex:1}
.solucao-footer{
margin:0 -1.7rem 0;
padding:1rem 1.4rem;
background:var(--blue-700);
color:#fff;
display:flex;
align-items:center;
gap:.7rem;
font-size:.88rem;
line-height:1.4;
}
.solucao-footer svg{flex:0 0 auto;color:#a8c4ff}
.solucao-footer span{flex:1}
.solucao-bottom{
margin-top:2rem;
background:var(--blue-700);
color:#fff;
border-radius:999px;
padding:1rem 1.6rem;
display:flex;
align-items:center;
justify-content:center;
gap:.75rem;
text-align:center;
font-size:.95rem;
box-shadow:0 8px 20px rgba(10,42,115,.18);
}
.solucao-bottom svg{flex:0 0 auto;color:#a8c4ff}
.solucao-bottom strong{font-weight:700}
@media (max-width:580px){
.solucao-bottom{border-radius:var(--radius-lg);padding:1rem 1.2rem;font-size:.88rem}
}
/* PROVA - imagem responsiva (Cada-gota-medida.webp)
Largura full container + radius/shadow alinhados ao card dark */
.prova-figura{margin:2rem auto 0;padding:0;text-align:center;max-width:100%}
.prova-figura picture{display:block}
.prova-figura img{
display:block;
width:100%;
height:auto;
max-height:none;
object-fit:cover;
margin:0 auto;
border-radius:32px;
box-shadow:0 20px 50px -15px rgba(9,17,40,.18);
}
/* (estilos antigos dos mockups CSS art mantidos abaixo se voltarem a ser usados) */
.prova-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem;margin-top:2.4rem}
@media (max-width:1080px){.prova-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.prova-grid{grid-template-columns:1fr}}
.prova-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:1.4rem;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;transition:.2s}
.prova-card:hover{box-shadow:var(--shadow);transform:translateY(-3px)}
.prova-card h3{font-size:1.05rem;margin:.2rem 0 .35rem;color:var(--ink)}
.prova-card p{margin:0;color:var(--muted);font-size:.88rem;line-height:1.5}
.prova-mock{background:linear-gradient(135deg,var(--blue-50),#fff);border:1px solid var(--line);border-radius:12px;height:160px;margin-bottom:1rem;padding:.9rem;display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden}
/* Mock 1: foto do hidrometro com display digital */
.prova-mock-photo{background:linear-gradient(135deg,#0a2a73,#1f4fd1);color:#fff}
.prova-mock-meter{background:#091128;color:#3ddc97;font-family:Courier New,monospace;padding:.7rem .9rem;border-radius:8px;border:2px solid #1f4fd1;text-align:center;box-shadow:inset 0 0 12px rgba(0,0,0,.4)}
.meter-display{font-size:1.25rem;font-weight:700;letter-spacing:.15em;text-shadow:0 0 8px rgba(61,220,151,.5)}
.meter-dial{margin-top:.4rem;height:6px;background:rgba(255,255,255,.1);border-radius:3px;position:relative;overflow:hidden}
.meter-dial span{position:absolute;left:0;top:0;height:100%;width:35%;background:#3ddc97;border-radius:3px}
.prova-mock-stamp{position:absolute;bottom:.7rem;left:.9rem;right:.9rem;font-size:.7rem;color:rgba(255,255,255,.85);background:rgba(0,0,0,.45);padding:.3rem .5rem;border-radius:4px}
/* Mock 2: app de leitura */
.prova-mock-app{background:#fff;border:1px solid var(--line);padding:0;overflow:hidden}
.prova-mock-app-bar{background:var(--blue);color:#fff;padding:.5rem .8rem;font-size:.78rem;font-weight:600}
.prova-mock-app-row{display:flex;justify-content:space-between;padding:.5rem .8rem;border-bottom:1px solid var(--line);font-size:.85rem;color:var(--ink-2)}
.prova-mock-app-row strong{color:var(--ink);font-family:Courier New,monospace}
.prova-mock-app-row-active{background:var(--blue-50);border-left:3px solid var(--blue)}
.prova-mock-app-row-active strong{color:var(--blue)}
.prova-mock-app-row .muted{color:var(--muted-2)}
/* Mock 3: comprovante (recibo) */
.prova-mock-receipt{background:#f7f7ee;padding:.5rem;align-items:center}
.receipt{background:#fff;width:100%;height:100%;padding:.7rem;font-family:Courier New,monospace;font-size:.7rem;color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.08)}
.receipt-head{text-align:center;font-weight:700;letter-spacing:.1em;border-bottom:1px dashed var(--muted-2);padding-bottom:.3rem;margin-bottom:.3rem;font-size:.72rem}
.receipt-row{display:flex;justify-content:space-between;font-size:.66rem;line-height:1.5}
.receipt-qr{margin-top:.4rem;text-align:center;font-size:.5rem;line-height:1;color:var(--ink);letter-spacing:1px}
/* Mock 4: dashboard com barras */
.prova-mock-dash{padding:.9rem .8rem .6rem}
.prova-mock-dash-head{font-size:.78rem;font-weight:600;color:var(--ink);margin-bottom:.7rem}
.prova-mock-bars{display:flex;align-items:flex-end;justify-content:space-between;height:80px;gap:4px}
.prova-mock-bars span{flex:1;background:linear-gradient(to top,var(--blue),var(--blue-700));border-radius:3px 3px 0 0;min-height:4px}
.prova-mock-dash-foot{display:flex;justify-content:space-between;margin-top:.4rem;color:var(--muted-2);font-size:.65rem}
/* COMO FUNCIONA - secao escura, 3 passos */
.steps-dark{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;margin-top:2.4rem}
@media (max-width:880px){.steps-dark{grid-template-columns:1fr}}
.steps-dark li{padding:1.6rem 0 0;border-top:3px solid var(--whatsapp)}
.step-num{display:inline-block;font-size:.85rem;font-weight:700;color:#a8c4ff;letter-spacing:.06em;margin-bottom:.6rem}
.steps-dark h3{color:#fff;font-size:1.2rem;margin-bottom:.5rem}
.steps-dark p{margin:0;color:#a9b8d4;line-height:1.6}
/* AUTORIDADE - case + quotes */
.autoridade-cases{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:1.4rem;margin-top:2.4rem}
@media (max-width:880px){.autoridade-cases{grid-template-columns:1fr}}
.autoridade-case{background:#fff;border:2px solid var(--blue);border-radius:var(--radius-lg);padding:1.8rem;box-shadow:0 14px 30px rgba(31,79,209,.12)}
.autoridade-tag{display:inline-block;background:var(--blue);color:#fff;font-size:.7rem;font-weight:700;letter-spacing:.06em;padding:.3rem .6rem;border-radius:6px;margin-bottom:.9rem;text-transform:uppercase}
.autoridade-case h3{font-size:1.2rem;color:var(--ink);margin-bottom:.6rem;line-height:1.3}
.autoridade-case p{color:var(--ink-2);line-height:1.6;margin-bottom:1rem}
.autoridade-case footer strong{display:block;color:var(--ink);font-size:.95rem}
.autoridade-case footer small{color:var(--muted);font-size:.85rem}
.autoridade-quote{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.6rem;box-shadow:var(--shadow-sm)}
.autoridade-quote p{font-size:.95rem;color:var(--ink-2);line-height:1.55;margin-bottom:.9rem}
.autoridade-quote footer strong{display:block;color:var(--ink);font-size:.88rem}
.autoridade-quote footer small{color:var(--muted);font-size:.78rem}
.autoridade-logos{margin-top:2.4rem;padding-top:2rem;border-top:1px solid var(--line);text-align:center}
.autoridade-logos-title{color:var(--muted);font-size:.78rem;text-transform:uppercase;letter-spacing:.14em;margin:0 0 1.2rem}
.autoridade-logos .logos-row{filter:grayscale(1);opacity:.85;align-items:center}
.autoridade-logos .logos-row img{height:42px;width:auto;max-width:160px;object-fit:contain}
/* CTA final centralizada */
.cta-final{text-align:center;max-width:760px;margin:0 auto}
.cta-final h2{color:#fff}
.cta-final p{color:rgba(255,255,255,.9);font-size:1.1rem}
.cta-final-actions{display:flex;justify-content:center;gap:.7rem;margin:1.6rem 0;flex-wrap:wrap}
.cta-final .human-badge{margin:1.2rem auto 0}
/* ============================================================
LEGAL PAGES (privacy, terms, data deletion)
============================================================ */
.legal-page{padding:3rem 0 4rem;background:#fff}
.legal-head{text-align:left;margin-bottom:2rem}
.legal-head h1{font-size:clamp(1.8rem,3vw,2.4rem);margin-bottom:.5rem;line-height:1.2}
.legal-head .muted{margin-bottom:.3rem}
.legal-version{font-size:.85rem;color:var(--muted);margin:.4rem 0 0;padding:.35rem .65rem;background:var(--blue-50);border-radius:6px;display:inline-block}
.legal-toc{background:var(--bg-alt);border:1px solid var(--line);border-radius:var(--radius);padding:1.2rem 1.5rem;margin:1.6rem 0 2.4rem}
.legal-toc strong{display:block;margin-bottom:.6rem;color:var(--ink);font-size:.95rem}
.legal-toc ol{margin:0;padding-left:1.4rem;display:grid;grid-template-columns:1fr 1fr;gap:.3rem .9rem;font-size:.92rem}
@media (max-width:680px){.legal-toc ol{grid-template-columns:1fr}}
.legal-toc a{color:var(--ink-2)}
.legal-toc a:hover{color:var(--blue)}
.legal-section{margin-bottom:2.4rem;scroll-margin-top:80px}
.legal-section h2{font-size:1.4rem;color:var(--ink);margin-bottom:.7rem;padding-top:.5rem;border-top:2px solid var(--blue);padding-top:1rem;margin-top:1.6rem}
.legal-section h3{font-size:1.1rem;color:var(--blue-700);margin:1.2rem 0 .5rem}
.legal-section p,.legal-section li{color:var(--ink-2);line-height:1.7;font-size:.95rem}
.legal-section ul,.legal-section ol{padding-left:1.4rem;margin:.5rem 0 1rem}
.legal-section ul li,.legal-section ol li{margin-bottom:.45rem}
.legal-section a{color:var(--blue);text-decoration:underline}
.legal-section a:hover{color:var(--blue-700)}
.legal-section strong{color:var(--ink);font-weight:700}
.legal-info{display:grid;grid-template-columns:max-content 1fr;gap:.5rem 1.2rem;background:var(--bg-alt);padding:1rem 1.2rem;border-radius:10px;margin:1rem 0;font-size:.92rem}
.legal-info dt{font-weight:600;color:var(--ink)}
.legal-info dd{margin:0;color:var(--ink-2)}
@media (max-width:520px){.legal-info{grid-template-columns:1fr}.legal-info dt{margin-top:.5rem;border-top:1px dashed var(--line);padding-top:.5rem}.legal-info dt:first-child{border-top:0;padding-top:0;margin-top:0}}
.legal-perms{display:grid;gap:1rem;margin:1rem 0}
.legal-perms dt{font-weight:700;color:var(--blue-700);font-size:1rem;margin-bottom:.3rem}
.legal-perms dd{margin:0 0 .5rem;color:var(--ink-2);padding-left:1.2rem;border-left:3px solid var(--blue-100);line-height:1.55}
.legal-table-wrap{overflow-x:auto;margin:1rem 0;border-radius:10px;border:1px solid var(--line)}
.legal-table{width:100%;border-collapse:collapse;font-size:.88rem;background:#fff}
.legal-table th,.legal-table td{padding:.65rem .9rem;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.legal-table th{background:var(--bg-alt);color:var(--ink);font-weight:600;font-size:.82rem;text-transform:uppercase;letter-spacing:.04em}
.legal-table tr:last-child td{border-bottom:0}
.legal-card{background:var(--bg-alt);border:1px solid var(--line);border-radius:12px;padding:1.4rem 1.6rem;margin:1rem 0;box-shadow:var(--shadow-sm)}
.legal-card h3{margin-top:0;color:var(--ink)}
.legal-card ol{padding-left:1.4rem;margin:.5rem 0}
.legal-email{font-size:1.05rem;background:#fff;padding:.7rem 1rem;border-radius:8px;border:1px solid var(--blue-100);font-family:Courier New,monospace}
.legal-contact{background:var(--blue-50);padding:1.1rem 1.4rem;border-radius:10px;border-left:4px solid var(--blue);font-style:normal;margin:1rem 0;line-height:1.7}
.legal-contact strong{color:var(--ink);display:block;margin-bottom:.2rem}
.legal-foot{margin-top:3rem;padding:1.4rem 1.5rem;background:var(--blue-50);border-radius:10px;text-align:center;font-size:.88rem;color:var(--ink-2);line-height:1.6}
.legal-foot a{color:var(--blue);font-weight:600;text-decoration:none;margin:0 .2rem}
.legal-foot a:hover{text-decoration:underline}