/* =========================================================
   PORTAL EXATAS — MENU
   ========================================================= */
:root{
  --pem-navy:#14142b;
  --pem-blue:#4f7df3;
  --pem-purple:#8b6ef3;
  --pem-border:#e7e8ee;
  --pem-muted:#6b7280;
  --pem-text:#1f2430;
  --pem-grad:linear-gradient(135deg,var(--pem-blue),var(--pem-purple));
}
.pem-header,.pem-header *{box-sizing:border-box;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;}

/* ---------------- DESKTOP HEADER ---------------- */
.pem-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 32px;border-bottom:1px solid var(--pem-border);
  position:relative;z-index:9998;background:#fff;
}
.pem-logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:17px;color:var(--pem-navy);white-space:nowrap;}
.pem-logo-mark{width:34px;height:34px;border-radius:9px;background:var(--pem-grad);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.pem-logo-text{display:flex;flex-direction:column;line-height:1.05;}
.pem-logo-text small{font-weight:700;font-size:10.5px;letter-spacing:.06em;color:var(--pem-blue);}

.pem-nav ul{list-style:none;display:flex;gap:28px;margin:0;padding:0;}
.pem-nav li{position:relative;}
.pem-nav a{text-decoration:none;color:var(--pem-text);font-size:14.5px;font-weight:600;padding:8px 2px;display:inline-block;cursor:pointer;}
.pem-nav li.pem-active > a{color:var(--pem-navy);font-weight:800;}
.pem-nav a:hover{color:var(--pem-blue);}

.pem-actions{display:flex;align-items:center;gap:12px;}
.pem-btn-atendimento{background:var(--pem-navy);color:#fff;border:none;border-radius:999px;padding:11px 22px;font-weight:700;font-size:14px;cursor:pointer;text-decoration:none;display:inline-block;}
.pem-btn-search{width:38px;height:38px;border-radius:50%;background:#f1f2f6;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;}

.pem-mega-menu{
  position:absolute;top:100%;left:0;right:0;background:#fff;
  border-bottom:1px solid var(--pem-border);box-shadow:0 18px 30px -20px rgba(20,20,43,.25);
  padding:28px 32px 34px;display:none;z-index:9997;
}
.pem-mega-menu.pem-open{display:block;}
.pem-mega-menu h2{font-size:17px;margin:0 0 18px;color:var(--pem-navy);}
.pem-materias-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;max-width:1120px;}
.pem-materia-card{border:1px solid var(--pem-border);border-radius:14px;padding:22px 14px;display:flex;flex-direction:column;align-items:center;gap:12px;text-decoration:none;color:var(--pem-text);transition:transform .15s ease,box-shadow .15s ease;}
.pem-materia-card:hover{transform:translateY(-3px);box-shadow:0 10px 22px -14px rgba(20,20,43,.35);border-color:#d8dae6;}
.pem-materia-icon{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0;}
.pem-materia-card span{font-weight:700;font-size:14px;text-align:center;}

/* ---------------- SEARCH OVERLAY (desktop + mobile) ---------------- */
.pem-overlay{position:fixed;inset:0;background:rgba(20,20,43,.45);display:none;align-items:flex-start;justify-content:center;z-index:99999;padding:20px;padding-top:8vh;}
.pem-overlay.pem-open{display:flex;}
.pem-panel{background:#fff;border-radius:16px;width:100%;max-width:640px;max-height:85vh;overflow:hidden;display:flex;flex-direction:column;}
.pem-search-input-wrap{display:flex;align-items:center;gap:10px;padding:18px 22px;border-bottom:1px solid var(--pem-border);}
.pem-search-input-wrap input{flex:1;border:none;outline:none;font-size:17px;color:var(--pem-text);}
.pem-search-close{background:none;border:none;cursor:pointer;color:var(--pem-muted);font-size:16px;}
.pem-search-filters{display:flex;gap:8px;padding:14px 22px;flex-wrap:wrap;border-bottom:1px solid var(--pem-border);}
.pem-chip{border:1px solid var(--pem-border);background:#fff;border-radius:999px;padding:6px 14px;font-size:12.5px;font-weight:600;cursor:pointer;color:var(--pem-muted);}
.pem-chip.pem-chip-active{background:var(--pem-navy);color:#fff;border-color:var(--pem-navy);}
.pem-search-results{overflow:auto;padding:8px;display:flex;flex-direction:column;gap:2px;}
.pem-result-item{
  display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--pem-text);
  padding:9px 10px;border-radius:10px;transition:background .15s ease;
}
.pem-result-item:hover{background:#f6f7fb;}
.pem-result-icon{
  flex-shrink:0;width:30px;height:30px;border-radius:50%;background:#f1f2f6;
  display:flex;align-items:center;justify-content:center;color:var(--pem-muted);
}
.pem-result-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;}
.pem-result-item .pem-title{
  font-weight:700;font-size:14.5px;line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.pem-result-item .pem-meta{font-size:11px;font-weight:700;color:var(--pem-blue);text-transform:uppercase;letter-spacing:.03em;}
.pem-result-item .pem-excerpt{
  font-size:12.5px;color:var(--pem-muted);line-height:1.35;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.pem-result-thumb{
  position:relative;flex-shrink:0;width:120px;height:68px;border-radius:9px;overflow:hidden;
  background:linear-gradient(135deg,var(--pem-blue),var(--pem-purple));
}
.pem-result-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s ease;}
.pem-result-item:hover .pem-result-thumb img{transform:scale(1.08);}
.pem-result-play{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(20,20,43,.22);opacity:0;transition:opacity .2s ease;
}
.pem-result-item:hover .pem-result-play{opacity:1;}
.pem-result-play-circle{
  width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.95);
  display:flex;align-items:center;justify-content:center;box-shadow:0 4px 10px rgba(20,20,43,.35);
}
.pem-no-results,.pem-loading{padding:30px 22px;text-align:center;color:var(--pem-muted);font-size:13.5px;}

/* =========================================================
   MOBILE — ESTILO APLICATIVO, BARRA FIXA NO RODAPÉ
   ========================================================= */
.pem-bottom-nav{display:none;}
.pem-sheet{display:none;}

@media (max-width:900px){

  /* esconde o header "de site" tradicional e o mega menu em hover */
  .pem-nav{display:none;}
  .pem-header{padding:14px 18px;}
  .pem-actions{display:none;} /* remove o botão de busca (e atendimento) do topo: só fica o da barra inferior */
  .pem-mega-menu{display:none !important;}

  body.pem-has-bottom-nav{padding-bottom:78px;}

  /* -------- barra inferior fixa (estilo app) -------- */
  .pem-bottom-nav{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:99998;
    background:#fff;border-top:1px solid var(--pem-border);
    padding:8px 6px calc(8px + env(safe-area-inset-bottom));
    box-shadow:0 -8px 24px -18px rgba(20,20,43,.35);
  }
  .pem-tab{
    flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;
    background:none;border:none;color:var(--pem-muted);font-size:11px;font-weight:600;
    padding:6px 2px;cursor:pointer;text-decoration:none;
  }
  .pem-tab svg{width:22px;height:22px;}
  .pem-tab.pem-tab-active{color:var(--pem-navy);}
  .pem-tab-search-btn{
    margin-top:-22px;
  }
  .pem-tab-search-circle{
    width:50px;height:50px;border-radius:50%;background:var(--pem-grad);
    display:flex;align-items:center;justify-content:center;box-shadow:0 8px 18px -6px rgba(79,125,243,.6);
  }
  .pem-tab-search-circle svg{width:22px;height:22px;}
  .pem-tab-search-btn span{color:var(--pem-navy);}

  .pem-tab-logo-mark{
    width:26px;height:26px;border-radius:8px;background:var(--pem-grad);
    display:flex;align-items:center;justify-content:center;
  }

  /* -------- bottom sheet (Matérias / Mais) -------- */
  .pem-sheet{
    display:block;position:fixed;left:0;right:0;bottom:0;z-index:99999;
    background:#fff;border-radius:20px 20px 0 0;
    transform:translateY(100%);transition:transform .25s ease;
    max-height:80vh;overflow:auto;box-shadow:0 -10px 30px rgba(20,20,43,.3);
    padding:10px 20px calc(20px + env(safe-area-inset-bottom));
  }
  .pem-sheet.pem-open{transform:translateY(0);}
  .pem-sheet-backdrop{
    display:none;position:fixed;inset:0;background:rgba(20,20,43,.45);z-index:99998;
  }
  .pem-sheet-backdrop.pem-open{display:block;}
  .pem-sheet-handle{width:36px;height:4px;background:var(--pem-border);border-radius:999px;margin:8px auto 14px;}
  .pem-sheet h2{font-size:16px;margin:0 0 14px;color:var(--pem-navy);}
  .pem-sheet .pem-materias-grid{grid-template-columns:repeat(3,1fr);gap:12px;max-width:none;}
  .pem-sheet .pem-materia-card{padding:16px 8px;border-radius:12px;}
  .pem-sheet .pem-materia-icon{width:42px;height:42px;}
  .pem-sheet .pem-materia-card span{font-size:12.5px;}

  .pem-sheet-links{display:flex;flex-direction:column;gap:2px;margin-top:4px;}
  .pem-sheet-links a{
    display:flex;align-items:center;padding:14px 4px;text-decoration:none;color:var(--pem-text);
    font-weight:600;font-size:15px;border-bottom:1px solid var(--pem-border);
  }
  .pem-sheet-links a:last-child{border-bottom:none;}

  /* busca ocupa a tela toda no mobile */
  .pem-search-overlay{padding:0;align-items:stretch;}
  .pem-search-overlay .pem-panel{max-width:none;max-height:none;height:100%;border-radius:0;}
  .pem-result-thumb{width:96px;height:56px;}
}