/* ===========================================================
   LuviTech — Componentes de página
   =========================================================== */

/* ---------------- HERO ---------------- */
.hero{position:relative;overflow:hidden;padding:64px 0 84px}
.hero-bg{
  position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(1100px 520px at 78% -8%,#EAF1FE 0%,rgba(234,241,254,0) 60%),
    radial-gradient(760px 480px at 102% 30%,#E2ECFE 0%,rgba(226,236,254,0) 58%),
    linear-gradient(180deg,#fff 0%,#FBFCFF 100%);
}
.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.02fr 1.18fr;gap:54px;align-items:center}
.hero-copy h1{font-size:clamp(36px,4.6vw,58px);font-weight:900;margin:22px 0 20px}
.hero-copy h1 .grad{
  background:linear-gradient(100deg,#1A56DB,#1D8BF2);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.lede{font-size:19px;color:var(--slate);max-width:560px;font-weight:450}
.hero-actions{display:flex;gap:14px;margin:34px 0 30px;flex-wrap:wrap}
.hero-trust{display:flex;align-items:center;gap:22px}
.hero-trust div:not(.sep){display:flex;flex-direction:column}
.hero-trust strong{font-size:24px;font-weight:800;color:var(--ink);letter-spacing:-.02em}
.hero-trust span{font-size:13px;color:var(--muted);font-weight:500}
.hero-trust .sep{width:1px;height:34px;background:var(--line)}

/* ---------------- DASHBOARD MOCKUP ---------------- */
.hero-mock{position:relative}
.mock-window{
  background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;
  box-shadow:var(--sh-lg);
}
.mock-bar{display:flex;align-items:center;gap:7px;padding:13px 16px;border-bottom:1px solid var(--line-soft);background:#FBFCFE}
.md-dot{width:11px;height:11px;border-radius:50%;background:#E0E6F0}
.md-dot:nth-child(1){background:#FF8087}.md-dot:nth-child(2){background:#FFCF6B}.md-dot:nth-child(3){background:#7BD495}
.mock-url{margin-left:14px;display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--muted);font-weight:500;background:#fff;border:1px solid var(--line-soft);padding:5px 12px;border-radius:8px}
.mock-url svg{width:13px;height:13px;color:#7BD495}
.mock-body{display:grid;grid-template-columns:158px 1fr;min-height:430px}
.mock-side{background:#0E2A5E;padding:16px 12px;display:flex;flex-direction:column;gap:4px}
.ms-brand{display:flex;align-items:center;gap:8px;padding:4px 8px 14px;color:#fff;font-weight:700;font-size:14px}
.ms-brand img{height:22px;filter:brightness(0) invert(1) drop-shadow(0 0 0 #fff)}
.ms-item{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:9px;color:#9DB4DD;font-size:12.5px;font-weight:600;cursor:default}
.ms-item svg{width:16px;height:16px}
.ms-item.active{background:rgba(255,255,255,.12);color:#fff}
.mock-main{padding:18px 18px 20px;background:#F7F9FD;display:flex;flex-direction:column;gap:13px;overflow:hidden}
.mm-head{display:flex;justify-content:space-between;align-items:center}
.mm-ey{font-size:11px;color:var(--muted);font-weight:600;letter-spacing:.04em}
.mm-head h4{font-size:16px;margin-top:2px}
.mm-live{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;color:#0c8a4e;background:#E7F8EE;padding:5px 10px;border-radius:999px}
.lv-dot{width:7px;height:7px;border-radius:50%;background:#0c8a4e;box-shadow:0 0 0 0 rgba(12,138,78,.5);animation:pulse 2s infinite}
.lv-dot.green{background:#1fbf6b}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(12,138,78,.45)}70%{box-shadow:0 0 0 7px rgba(12,138,78,0)}100%{box-shadow:0 0 0 0 rgba(12,138,78,0)}}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
.kpi{background:#fff;border:1px solid var(--line-soft);border-radius:11px;padding:11px 12px;display:flex;flex-direction:column;gap:2px}
.kpi-l{font-size:10.5px;color:var(--muted);font-weight:600}
.kpi-v{font-size:21px;font-weight:800;color:var(--ink);letter-spacing:-.02em}
.kpi-v.blue{color:var(--blue-500)}
.kpi-up{font-size:10px;font-weight:700;color:#0c8a4e}
.kpi-dn{font-size:10px;font-weight:700;color:#E0894B}
.mm-cols{display:grid;grid-template-columns:1.35fr 1fr;gap:9px}
.map-card,.wa-card,.os-card{background:#fff;border:1px solid var(--line-soft);border-radius:12px;padding:12px}
.map-head,.os-head{display:flex;justify-content:space-between;align-items:center;font-size:12.5px;font-weight:700;color:var(--ink);margin-bottom:9px}
.chip-sm{font-size:10px;font-weight:600;color:var(--blue-600);background:var(--blue-50);padding:3px 8px;border-radius:6px}
.map-canvas{position:relative;height:128px;border-radius:9px;overflow:hidden;background:#F2F6FD}
.map-grid{width:100%;height:100%;display:block}
.pin{position:absolute;width:18px;height:18px;border-radius:50% 50% 50% 0;background:var(--blue-500);transform:rotate(-45deg);box-shadow:0 4px 8px rgba(26,86,219,.4);display:flex;align-items:center;justify-content:center}
.pin span{width:6px;height:6px;background:#fff;border-radius:50%}
.pin.done{background:#1fbf6b;box-shadow:0 4px 8px rgba(31,191,107,.4)}
.pin.done svg{width:10px;height:10px;transform:rotate(45deg)}
.pin-a{left:8%;top:64%}.pin-b{left:46%;top:28%}.pin-c{right:8%;top:8%}
.map-badge{position:absolute;left:10px;bottom:10px;background:#fff;border:1px solid var(--line-soft);border-radius:8px;padding:5px 9px;font-size:10.5px;color:var(--slate);font-weight:600;box-shadow:var(--sh-xs)}
.map-badge strong{color:var(--blue-600)}
.wa-card{background:#F0FAF4;border-color:#D6F0E0;display:flex;flex-direction:column;gap:7px}
.wa-top{display:flex;align-items:center;gap:9px}
.wa-ic{width:30px;height:30px;border-radius:9px;background:#25D366;display:flex;align-items:center;justify-content:center}
.wa-ic svg{width:17px;height:17px}
.wa-top strong{display:block;font-size:12px;color:var(--ink)}
.wa-top span{font-size:10px;color:#0c8a4e;font-weight:600}
.wa-msg{background:#fff;border-radius:9px 9px 9px 3px;padding:7px 10px;font-size:11px;color:var(--slate);line-height:1.45;box-shadow:var(--sh-xs)}
.wa-msg b{color:var(--ink)}
.wa-msg.out{background:#DCF8C6;border-radius:9px 9px 3px 9px;align-self:flex-end;color:#1b5e34;font-weight:600}
.wa-stat{display:flex;align-items:center;gap:6px;font-size:10px;color:#0c8a4e;font-weight:600;margin-top:auto}
.os-card .os-row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--line-soft)}
.os-row:first-of-type{border-top:none}
.os-id{font-size:11px;font-weight:700;color:var(--blue-600)}
.os-cli{font-size:11.5px;color:var(--slate);font-weight:500}
.os-tag{font-size:9.5px;font-weight:700;padding:3px 8px;border-radius:6px}
.tg-rota{background:#E9F0FE;color:#1339A0}.tg-and{background:#FFF2E2;color:#C97A29}.tg-ok{background:#E7F8EE;color:#0c8a4e}
.mock-float{position:absolute;left:-26px;bottom:48px;display:flex;align-items:center;gap:11px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px 16px;box-shadow:var(--sh-md);max-width:240px}
.mock-float .icon-chip{width:38px;height:38px;border-radius:11px}.mock-float .icon-chip svg{width:18px;height:18px}
.mock-float strong{display:block;font-size:13px;color:var(--ink)}
.mock-float span{font-size:11.5px;color:var(--muted)}

/* ---------------- TRUST STRIP ---------------- */
.strip{border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);background:var(--paper);padding:30px 0}
.strip-label{text-align:center;font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:18px}
.strip-items{display:flex;justify-content:center;flex-wrap:wrap;gap:14px 40px}
.strip-items span{display:inline-flex;align-items:center;gap:9px;font-size:15px;font-weight:600;color:var(--slate)}
.strip-items svg{width:20px;height:20px;color:var(--blue-400)}

/* ---------------- PRODUTOS (cards) ---------------- */
.prod-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.prod-card{display:flex;flex-direction:column}
.prod-card h3{font-size:21px;margin:18px 0 10px}
.prod-card>p{color:var(--slate);font-size:15px}
.prod-link{margin-top:auto;padding-top:20px;display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:14.5px;color:var(--blue-500)}
.prod-link span{transition:.2s}
.prod-card:hover .prod-link span{transform:translateX(4px)}

/* ---------------- SEÇÕES SUAVES ---------------- */
.sec-soft{background:var(--blue-25);border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}

/* ---------------- SERVIÇOS (cards) ---------------- */
.serv-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.serv-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:26px 24px;transition:.24s}
.serv-card:hover{transform:translateY(-4px);box-shadow:var(--sh-md);border-color:var(--blue-100)}
.serv-card h3{font-size:18px;margin:16px 0 9px}
.serv-card p{font-size:14.5px;color:var(--slate)}
.serv-cta{text-align:center;margin-top:42px}

/* ---------------- POR QUE ESCOLHER ---------------- */
.why-wrap{display:grid;grid-template-columns:.85fr 1.15fr;gap:54px;align-items:start}
.why-aside h2{font-size:clamp(28px,3.4vw,40px);margin:18px 0 16px}
.why-aside p{color:var(--slate);font-size:17px;margin-bottom:26px}
.why-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.why-item{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:24px;box-shadow:var(--sh-xs)}
.why-item h4{font-size:16.5px;margin:16px 0 8px}
.why-item p{font-size:14px;color:var(--slate);line-height:1.6}

/* ---------------- CTA BAND ---------------- */
.cta-band{padding:30px 0 96px}
.cta-inner{position:relative;overflow:hidden;background:var(--gradient-blue);border-radius:var(--r-xl);padding:64px 56px;text-align:center;box-shadow:var(--sh-blue)}
.cta-glow{position:absolute;inset:0;background:radial-gradient(600px 300px at 20% 0%,rgba(255,255,255,.22),transparent 60%),radial-gradient(500px 320px at 95% 110%,rgba(255,255,255,.16),transparent 55%);pointer-events:none}
.cta-inner h2{position:relative;color:#fff;font-size:clamp(28px,3.6vw,42px);max-width:740px;margin:0 auto 16px}
.cta-inner p{position:relative;color:rgba(255,255,255,.9);font-size:18px;max-width:600px;margin:0 auto 30px}
.cta-actions{position:relative;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.cta-wa{background:rgba(255,255,255,.14);color:#fff;border:1.5px solid rgba(255,255,255,.4)}
.cta-wa:hover{background:rgba(255,255,255,.22);transform:translateY(-2px)}

/* ===========================================================
   PÁGINAS INTERNAS — cabeçalho de página
   =========================================================== */
.page-hero{position:relative;overflow:hidden;padding:72px 0 60px;background:linear-gradient(180deg,#F4F8FF 0%,#fff 100%);border-bottom:1px solid var(--line-soft)}
.page-hero .wrap{position:relative;z-index:1}
.page-hero .crumb{font-size:13.5px;color:var(--muted);font-weight:600;margin-bottom:18px}
.page-hero .crumb a:hover{color:var(--blue-500)}
.page-hero h1{font-size:clamp(34px,4.4vw,52px);font-weight:900;max-width:780px;margin:14px 0 18px}
.page-hero .ph-lede{font-size:19px;color:var(--slate);max-width:660px}
.ph-glow{position:absolute;top:-120px;right:-80px;width:520px;height:420px;background:radial-gradient(circle,#DCE7FD,transparent 65%);z-index:0;pointer-events:none}

/* ---------------- PRODUTO — bloco detalhado ---------------- */
.prod-block{display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:center;padding:30px 0}
.prod-block.rev .pb-visual{order:2}
.pb-info .num{font-size:13px;font-weight:800;letter-spacing:.1em;color:var(--blue-400)}
.pb-info h2{font-size:clamp(26px,3vw,36px);margin:14px 0 16px}
.pb-info>p{color:var(--slate);font-size:17px;margin-bottom:24px}
.pb-feats{display:grid;grid-template-columns:1fr 1fr;gap:13px 20px;list-style:none;margin:0 0 30px;padding:0}
.pb-feats li{display:flex;align-items:flex-start;gap:10px;font-size:15px;font-weight:500;color:var(--ink)}
.pb-feats li svg{width:20px;height:20px;color:#fff;background:var(--blue-500);border-radius:50%;padding:3px;flex:none;margin-top:1px}
.pb-visual{position:relative}
.pb-screen{background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--sh-lg);overflow:hidden}
.pb-screen .pbs-bar{display:flex;align-items:center;gap:6px;padding:12px 15px;border-bottom:1px solid var(--line-soft);background:#FBFCFE}
.pb-screen .pbs-bar i{width:9px;height:9px;border-radius:50%;background:#E0E6F0;font-style:normal}
.pb-screen .pbs-title{margin-left:10px;font-size:12px;font-weight:600;color:var(--muted)}
.pbs-body{padding:18px}

/* mini visuals reused */
.mini-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}
.mini-kpi{background:#F7F9FD;border:1px solid var(--line-soft);border-radius:10px;padding:12px}
.mini-kpi span{font-size:11px;color:var(--muted);font-weight:600;display:block}
.mini-kpi strong{font-size:22px;color:var(--ink);letter-spacing:-.02em}
.mini-kpi strong.b{color:var(--blue-500)}
.mini-row{display:grid;grid-template-columns:auto 1fr auto;gap:11px;align-items:center;padding:11px 12px;border:1px solid var(--line-soft);border-radius:10px;margin-bottom:9px;background:#fff}
.mini-row .av{width:30px;height:30px;border-radius:8px;background:var(--blue-50);color:var(--blue-500);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px}
.mini-row .nm{font-size:13px;font-weight:600;color:var(--ink)}
.mini-row .nm small{display:block;font-weight:500;color:var(--muted);font-size:11px}
.mini-row .tg{font-size:10px;font-weight:700;padding:3px 9px;border-radius:6px}
.mini-bar{height:8px;border-radius:99px;background:var(--line-soft);overflow:hidden;margin:6px 0 0}
.mini-bar i{display:block;height:100%;background:var(--gradient-blue);border-radius:99px}
.doc-row{display:flex;align-items:center;gap:11px;padding:12px;border:1px solid var(--line-soft);border-radius:10px;margin-bottom:9px}
.doc-row .di{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex:none}
.doc-row .di.pdf{background:#FDECEC;color:#D9534F}.doc-row .di.xml{background:#EAF3EC;color:#4a9a5e}.doc-row .di.nf{background:var(--blue-50);color:var(--blue-500)}
.doc-row .di svg{width:17px;height:17px}
.doc-row .dn{font-size:13px;font-weight:600;color:var(--ink);flex:1}
.doc-row .dn small{display:block;font-weight:500;color:var(--muted);font-size:11px}
.doc-row .dl{font-size:11px;font-weight:700;color:var(--blue-500);background:var(--blue-50);padding:5px 11px;border-radius:7px}

/* ---------------- SERVIÇO — linha alternada ---------------- */
.serv-list{display:flex;flex-direction:column;gap:0}
.serv-row{display:grid;grid-template-columns:64px 1fr;gap:26px;padding:38px 0;border-top:1px solid var(--line)}
.serv-row:first-child{border-top:none}
.serv-row .icon-chip{width:64px;height:64px;border-radius:18px}
.serv-row .icon-chip svg{width:30px;height:30px}
.serv-row h2{font-size:25px;margin-bottom:10px}
.serv-row>div>p{color:var(--slate);font-size:16.5px;max-width:680px;margin-bottom:18px}
.serv-tags{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:0;padding:0}
.serv-tags li{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--blue-700);background:var(--blue-50);border:1px solid var(--blue-100);padding:8px 14px;border-radius:10px}
.serv-tags li svg{width:15px;height:15px;color:var(--blue-500)}

/* ---------------- SOBRE ---------------- */
.about-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:54px;align-items:center}
.about-grid p{color:var(--slate);font-size:17.5px;margin-bottom:18px;line-height:1.75}
.about-grid p.lead{font-size:20px;color:var(--ink);font-weight:500}
.about-visual{background:var(--gradient-blue);border-radius:var(--r-xl);padding:40px;color:#fff;box-shadow:var(--sh-blue);position:relative;overflow:hidden}
.about-visual .glow{position:absolute;inset:0;background:radial-gradient(420px 240px at 90% -10%,rgba(255,255,255,.25),transparent 60%)}
.av-stats{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:18px}
.av-stat{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);border-radius:14px;padding:20px}
.av-stat strong{font-size:34px;font-weight:800;display:block;letter-spacing:-.02em}
.av-stat span{font-size:13.5px;color:rgba(255,255,255,.85)}
.values-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.value-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:28px;box-shadow:var(--sh-xs)}
.value-card h3{font-size:18px;margin:16px 0 9px}
.value-card p{font-size:14.5px;color:var(--slate)}

/* ---------------- CONTATO ---------------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.contact-form{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:36px;box-shadow:var(--sh-sm)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{margin-bottom:16px}
.field label{display:block;font-size:13.5px;font-weight:600;color:var(--ink);margin-bottom:7px}
.field input,.field select,.field textarea{
  width:100%;font-family:inherit;font-size:15px;color:var(--ink);
  padding:12px 14px;border:1.5px solid var(--line);border-radius:11px;background:#FCFDFF;transition:.16s;
}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--blue-400);box-shadow:0 0 0 4px var(--blue-50);background:#fff}
.field textarea{resize:vertical;min-height:120px}
.form-note{font-size:12.5px;color:var(--muted);margin-top:6px}
.contact-side .ci-card{display:flex;align-items:flex-start;gap:16px;background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:22px;margin-bottom:16px;box-shadow:var(--sh-xs)}
.contact-side .ci-card .icon-chip{flex:none}
.ci-card h4{font-size:16px;margin-bottom:4px}
.ci-card p{font-size:14.5px;color:var(--slate)}
.ci-card a{color:var(--blue-500);font-weight:600}
.wa-block{background:#F0FAF4;border:1px solid #CDEEDE;border-radius:var(--r-md);padding:26px;text-align:center}
.wa-block h4{font-size:18px;margin:14px 0 8px}
.wa-block p{font-size:14.5px;color:var(--slate);margin-bottom:18px}
.wa-block .icon-chip{background:#25D366;color:#fff;border:none;margin:0 auto;width:54px;height:54px;border-radius:16px}
.wa-block .icon-chip svg{width:28px;height:28px}
.form-success{display:none;text-align:center;padding:30px 10px}
.form-success.show{display:block}
.form-success .icon-chip{margin:0 auto 16px;width:60px;height:60px;border-radius:18px}
.form-success h3{font-size:22px;margin-bottom:8px}
.form-success p{color:var(--slate)}

/* ===========================================================
   RESPONSIVO — componentes
   =========================================================== */
@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr;gap:44px}
  .hero-mock{max-width:620px}
  .why-wrap{grid-template-columns:1fr;gap:36px}
  .serv-grid{grid-template-columns:1fr 1fr}
  .about-grid,.contact-grid{grid-template-columns:1fr;gap:36px}
}
@media (max-width:760px){
  .prod-grid{grid-template-columns:1fr}
  .prod-block,.prod-block.rev{grid-template-columns:1fr;gap:30px}
  .prod-block.rev .pb-visual{order:0}
  .values-grid{grid-template-columns:1fr}
  .pb-feats{grid-template-columns:1fr}
  .mock-float{left:0;bottom:-18px}
  .serv-row{grid-template-columns:1fr;gap:16px}
  .serv-row .icon-chip{width:54px;height:54px}
}
@media (max-width:560px){
  .serv-grid{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
  .kpis{grid-template-columns:1fr 1fr}
  .mm-cols{grid-template-columns:1fr}
  .hero-trust{flex-wrap:wrap;gap:14px}
  .cta-inner{padding:48px 26px}
}