/* ==========================================================================
   Página: App de Medição — Siscon Medição
   Só o que é exclusivo desta página. Header, footer, nav, botões, largura de
   coluna e espaçamentos vêm de assets/css/main.css.
   ========================================================================== */

/* ===== Hero em duas colunas (texto + mockup do app) ===== */
.hero-int .hero-grid{display:grid;grid-template-columns:1fr;gap:44px;align-items:center;}
.hero-int .hero-badges{display:flex;gap:12px;margin-top:32px;flex-wrap:wrap;}
.hero-int .hero-badges div{display:flex;align-items:center;gap:9px;font-size:.88rem;color:#DCEBFA;font-weight:600;background:rgba(255,255,255,.08);border-radius:999px;padding:8px 16px;}
.hero-int .hero-badges svg{flex-shrink:0;}
.hero-int .ctas{display:flex;gap:14px;flex-wrap:wrap;}

/* mockup do celular */
.phone{width:270px;margin:0 auto;background:linear-gradient(160deg,var(--azul-claro) 0%,#0d2c4d 100%);border-radius:34px;padding:14px 12px;box-shadow:0 18px 45px rgba(0,0,0,.28),0 0 0 6px rgba(255,255,255,.08);}
.phone-screen{background:var(--bg);border-radius:24px;overflow:hidden;}
.phone-top{background:var(--azul-claro);color:#fff;padding:14px 16px;font-size:.8rem;font-weight:700;display:flex;justify-content:space-between;align-items:center;}
.phone-top .off{background:#0E9F6E;font-size:.62rem;padding:2px 8px;border-radius:999px;letter-spacing:.4px;}
.leitura{margin:12px;background:#fff;border-radius:14px;padding:14px;border:1px solid var(--cinza-borda);box-shadow:0 2px 20px rgba(0,0,0,.04);}
.leitura .rotulo{font-size:.62rem;text-transform:uppercase;letter-spacing:1px;color:var(--cinza);font-weight:700;}
.leitura .valor{font-size:1.5rem;font-weight:800;color:var(--azul);font-variant-numeric:tabular-nums;letter-spacing:2px;}
/* a foto que o leiturista acabou de tirar, dentro do mockup do app */
.leitura .foto{margin-top:10px;aspect-ratio:4/3;border-radius:8px;background:#fff;border:1px solid var(--cinza-borda);overflow:hidden;display:flex;align-items:center;justify-content:center;padding:4px;}
.leitura .foto img{width:100%;height:100%;object-fit:contain;}
.leitura .foto-legenda{margin-top:8px;display:flex;align-items:center;justify-content:center;gap:6px;color:var(--azul-claro);font-size:.68rem;font-weight:700;}
.leitura .check{margin-top:10px;display:flex;align-items:center;gap:7px;font-size:.72rem;font-weight:700;color:#1E8E5A;}
.phone-alerta{margin:0 12px 14px;background:#FFF4E8;border:1px solid #FFD8B0;border-radius:12px;padding:11px 13px;font-size:.7rem;color:#9A4A00;font-weight:600;line-height:1.45;}
.phone-alerta strong{color:#E8590C;}

/* ===== Bloco "um dia de leitura sem o app" ===== */
.dor-grid{display:grid;grid-template-columns:1fr;gap:16px;max-width:860px;margin:0 auto;}
.dor-item{display:flex;gap:16px;align-items:flex-start;background:#fff;border:1px solid var(--cinza-borda);border-radius:16px;padding:20px 22px;box-shadow:0 2px 20px rgba(0,0,0,.04);transition:transform .2s,box-shadow .2s;}
.dor-item:hover{transform:translateY(-4px);box-shadow:0 8px 26px rgba(0,0,0,.07);}
.dor-item .num{flex-shrink:0;width:38px;height:38px;border-radius:10px;background:var(--amarelo-suave);color:var(--amarelo-texto);font-weight:800;font-size:1rem;display:flex;align-items:center;justify-content:center;}
.dor-item h3{font-size:1.02rem;color:var(--azul);margin-bottom:4px;font-weight:700;}
.dor-item p{color:var(--cinza);font-size:.94rem;}
.dor-fecho{max-width:860px;margin:36px auto 0;text-align:center;background:var(--bg);border:1px solid var(--cinza-borda);border-radius:16px;padding:26px 28px;color:var(--azul);font-size:1.06rem;font-weight:600;}

/* ===== Travas anti-erro ===== */
.travas-grid{display:grid;grid-template-columns:1fr;gap:22px;}
.trava{background:#fff;border-radius:18px;padding:30px 28px;border:1px solid var(--cinza-borda);box-shadow:0 2px 20px rgba(0,0,0,.04);display:flex;flex-direction:column;gap:12px;transition:transform .2s,box-shadow .2s;}
.trava:hover{transform:translateY(-4px);box-shadow:0 10px 30px rgba(0,0,0,.08);}
.trava .icone{width:52px;height:52px;border-radius:14px;background:var(--bg);border:1px solid var(--cinza-borda);display:flex;align-items:center;justify-content:center;}
.trava h3{color:var(--azul);font-size:1.15rem;font-weight:800;line-height:1.3;}
.trava p{color:var(--cinza);font-size:.96rem;}
.trava p strong{color:var(--azul);}

/* ===== Produtividade do leiturista ===== */
.prod-wrap{display:grid;grid-template-columns:1fr;gap:44px;align-items:center;}
.prod-lista{display:flex;flex-direction:column;gap:22px;}
.prod-item{display:flex;gap:16px;align-items:flex-start;}
.prod-item .marca{flex-shrink:0;width:44px;height:44px;border-radius:12px;background:var(--azul-claro);display:flex;align-items:center;justify-content:center;}
.prod-item h3{color:var(--azul);font-size:1.08rem;font-weight:800;margin-bottom:4px;}
.prod-item p{color:var(--cinza);font-size:.95rem;}
.prod-equacao{background:var(--azul);color:#DCEBFA;border-radius:18px;padding:36px 30px;text-align:center;box-shadow:0 2px 20px rgba(0,0,0,.04);}
.prod-equacao .linha{display:flex;align-items:center;justify-content:center;gap:14px;font-weight:800;font-size:1.05rem;color:#fff;}
/* as duas caixas dividem a linha em vez de quebrar: com flex-wrap a segunda
   descia e o "=" ficava sobrando ao lado da primeira */
.prod-equacao .caixa{flex:1 1 0;min-width:0;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);padding:12px 18px;border-radius:12px;}
.prod-equacao .sinal{flex:none;color:var(--amarelo);font-size:1.5rem;}
.prod-equacao p{margin-top:20px;color:#DCEBFA;font-size:.94rem;font-weight:400;}

/* ===== Integração com ERPs ===== */
.erps-lista{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;max-width:860px;margin:0 auto 34px;}
.erp{background:#fff;border:1px solid var(--cinza-borda);border-radius:999px;padding:14px 28px;text-align:center;font-weight:700;color:var(--azul);font-size:1rem;box-shadow:0 2px 20px rgba(0,0,0,.04);transition:transform .2s,box-shadow .2s;}
.erp:hover{border-color:var(--azul-claro);transform:translateY(-4px);box-shadow:0 8px 26px rgba(0,0,0,.08);}
.erp span{display:block;font-size:.62rem;color:var(--cinza);font-weight:600;text-transform:uppercase;letter-spacing:1px;margin-top:2px;}
.integracao-nota{max-width:720px;margin:0 auto;text-align:center;color:var(--cinza);font-size:1.04rem;}
.integracao-nota strong{color:var(--azul);}

/* ===== Bifurcação por perfil ===== */
.perfis-grid{display:grid;grid-template-columns:1fr;gap:26px;max-width:960px;margin:0 auto;}
.perfil{border-radius:18px;padding:38px 32px;display:flex;flex-direction:column;gap:16px;box-shadow:0 2px 20px rgba(0,0,0,.04);transition:transform .2s,box-shadow .2s;}
.perfil:hover{transform:translateY(-4px);box-shadow:0 12px 32px rgba(0,0,0,.10);}
.perfil-medicao{background:var(--azul);color:#DCEBFA;}
.perfil-adm{background:#fff;border:1px solid var(--cinza-borda);color:var(--texto);}
.perfil .tag{align-self:flex-start;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:2px;padding:5px 14px;border-radius:999px;}
.perfil-medicao .tag{background:rgba(245,184,65,.16);color:var(--amarelo);border:1px solid rgba(245,184,65,.5);}
.perfil-adm .tag{background:var(--bg);color:var(--azul-claro);border:1px solid var(--cinza-borda);}
.perfil h3{font-size:1.45rem;font-weight:800;line-height:1.25;color:#fff;}
.perfil-adm h3{color:var(--azul);}
.perfil p{font-size:.98rem;}
.perfil-medicao p{color:#DCEBFA;}
.perfil-adm p{color:var(--cinza);}
.perfil ul{list-style:none;display:flex;flex-direction:column;gap:9px;margin:4px 0 8px;}
.perfil ul li{display:flex;gap:10px;align-items:flex-start;font-size:.93rem;}
.perfil-medicao ul li{color:#DCEBFA;}
.perfil-adm ul li{color:var(--texto);}
.perfil ul li::before{content:"✓";font-weight:800;flex-shrink:0;}
.perfil-medicao ul li::before{color:var(--amarelo);}
.perfil-adm ul li::before{color:var(--azul-claro);}
.perfil .btn{margin-top:auto;align-self:flex-start;}

/* ===== Prova social ===== */
.prova{background:var(--azul);color:#DCEBFA;text-align:center;}
.prova .section-head h2{color:#fff;}
.prova .section-head .kicker{color:var(--amarelo);}
.prova .section-head p{color:#DCEBFA;}
.numeros{display:grid;grid-template-columns:1fr;gap:22px;max-width:900px;margin:0 auto 48px;}
.numero{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-radius:18px;padding:34px 24px;}
.numero .grande{font-size:2.6rem;font-weight:800;color:var(--amarelo);line-height:1.1;letter-spacing:-1px;}
.numero .legenda{margin-top:8px;font-size:.95rem;color:#fff;font-weight:600;}
.numero .detalhe{margin-top:6px;font-size:.82rem;color:#DCEBFA;}
.prova-cta{display:flex;flex-direction:column;align-items:center;gap:16px;}
.prova-cta small{color:#BAE6FD;font-size:.85rem;max-width:520px;}

/* ===== Responsivo ===== */
@media (min-width:640px){
  .dor-grid{grid-template-columns:1fr 1fr;}
  .numeros{grid-template-columns:repeat(3,1fr);}
}
@media (min-width:900px){
  .hero-int .hero-grid{grid-template-columns:1.15fr .85fr;}
  .travas-grid{grid-template-columns:repeat(2,1fr);}
  .prod-wrap{grid-template-columns:1.05fr .95fr;}
  .perfis-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:639px){
  .prod-equacao{padding:28px 18px;}
  .prod-equacao .linha{gap:9px;font-size:.92rem;}
  .prod-equacao .caixa{padding:12px 10px;}
  .prod-equacao .sinal{font-size:1.25rem;}
  .numero .grande{font-size:2.1rem;}
  .perfil h3{font-size:1.25rem;}
}