:root{ --orange:#FF5722; --text:#222; --muted:#555; --line:#F2F4F7; --bg:#fff; --radius:12px; --shadow:0 8px 24px rgba(16,24,40,.06); }
*{box-sizing:border-box}
body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,sans-serif;color:var(--text);background:var(--bg)}
.container{max-width:1120px;margin:auto;padding:24px}
.header{display:flex;align-items:center;justify-content:space-between}
.logo{display:flex;align-items:center;gap:10px;font-weight:700}
.logo img{width:28px;height:28px}
.nav a{margin:0 12px;color:#333;text-decoration:none}
.actions .btn{margin-left:8px}
.btn{display:inline-block;padding:10px 14px;border-radius:10px;cursor:pointer}
.btn-primary{background:var(--orange);color:#fff;border:none}
.btn-outline{border:1px solid var(--orange);color:var(--orange);background:#fff}

/* Hero */
.hero{display:grid;grid-template-columns:1.2fr .8fr;gap:32px;align-items:center;margin:24px 0 24px}
.hero-text h1{font-size:44px;line-height:1.1;margin:0 0 12px}
.hero-text p{color:var(--muted);max-width:52ch}
.hero-art{display:grid}
.hero-img{width:100%;max-width:640px;justify-self:end}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px}

/* Barra de filtros (opcional na Home) */
.filters-bar{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin:12px 0 24px}
.filters-bar .field{display:flex;flex-direction:column;gap:6px}
.filters-bar input, .filters-bar select{padding:10px;border:1px solid var(--line);border-radius:10px}
.filters-bar .actions{display:flex;gap:8px;align-items:end}

/* Secções comuns */
.section{margin:24px 0}
.row{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.category-card{padding:20px;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);background:#fff;text-align:center}
.step{display:flex;gap:16px;align-items:flex-start}
.step .icon{width:44px;height:44px;border-radius:10px;background:#FFF1EC;color:var(--orange);display:grid;place-items:center;font-weight:700}
.list{display:grid;gap:12px}
.job{display:flex;justify-content:space-between;align-items:center;border:1px solid var(--line);border-radius:12px;padding:16px;background:#fff}
.meta{color:var(--muted);font-size:14px}
.chips{margin-top:6px}
.chip{display:inline-block;border:1px solid var(--line);padding:4px 8px;border-radius:999px;font-size:12px;margin-right:6px}
.actions-row{margin-top:12px}

/* Empregos a Tempo Inteiro (Home) - layout em 2 colunas */
.home-jobs{display:grid;grid-template-columns:1fr 1.4fr;gap:24px}
.home-jobs .breadcrumb{color:#777;font-size:13px;margin-bottom:10px}
.home-jobs .jobs-list .job{border:1px solid var(--line)}

/* Rodapé */
.footer{margin-top:48px;padding:40px 0;border-top:1px solid var(--line)}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1.2fr;gap:24px}
.footer-copy{margin-top:16px;color:#777}

/* Página de listagem com filtros laterais */
.grid{display:grid;grid-template-columns:280px 1fr;gap:24px}
.filters input[type="text"], .filters select, .newsletter input[type="email"]{width:100%;padding:10px;border-radius:10px;border:1px solid var(--line)}
.filters .group{margin:10px 0}
.filters label{display:block;margin:4px 0;color:#333}
input[type="range"]{width:100%}

@media (max-width:960px){
  .hero{grid-template-columns:1fr}
  .hero-img{justify-self:center;max-width:460px}
  .row{grid-template-columns:1fr}
  .grid{grid-template-columns:1fr}
  .home-jobs{grid-template-columns:1fr}
  .nav{display:none}
  .filters-bar{grid-template-columns:1fr 1fr}
}



















 
<style>
  .btn { padding: 8px 14px; border: 1px solid #ccc; border-radius: 6px; background:#FF9C7C; cursor:pointer; }
  .btn.btn-danger { background:#FF9C7C; color:#fff; border-color:#FF9C7C; }
  .btn-block { width: 100%; }

  .modal-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.55);
    display: none;                /* oculto por padrão */
    align-items: center;          /* centra verticalmente */
    justify-content: center;      /* centra horizontalmente */
    z-index: 1050;
  }
  .modal-box {
    background: #1f1f1f; color: #fff;
    width: min(92vw, 480px);
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.45);
    padding: 20px 18px 16px;
    position: relative;
  }
  .modal-title { margin: 0 0 12px; font-size: 18px; }
  .modal-close {
    position: absolute; top: 8px; right: 10px;
    border: 0; background: transparent; color: #fff;
    font-size: 24px; line-height: 1; cursor: pointer;
  }
  /* Inputs básicos (se já usa Bootstrap, pode remover estas regras) */
  .form-group { margin-bottom: 12px; }
  .form-control {
    width: 100%; padding: 10px 12px; border-radius: 8px;
    border: 1px solid #3a3a3a; background:#fff; color:#000;
  }
  body.modal-open { overflow: hidden; } /* evita scroll do fundo */
</style>